Bootstrap：如何在标题的开头和结尾垂直对齐两个按钮？

问题描述 投票：1回答：1

我正在使用bootstrap 3模态，我被要求做的设计是

enter image description here

注意图形设计者如何将一个按钮与文本的开头垂直对齐，另一个按钮与文本的末尾垂直对齐。

我的代码是

<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
<?php echo $question_title; ?>
</div>
<div class="row">
<?php echo $you_know; ?>
</div>
<div class="row">
<?php echo $migrant; ?>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
<?php echo $yes; ?>
</button>
</div>

<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
<?php echo $no; ?>
</button>
</div>
</div>

我得到了我想要的但不是我想要的对齐方式，如果我添加一些边距，它会在另一个屏幕上打破，解决它的最佳方法是什么？

请注意，我尝试将我的所有代码插入片段，它比实际交易更麻烦，不要使用片段作为参考，我的浏览器代码更好，不要担心我的课程，它们似乎很多但是它们都没用，它们只不过是一次失败的对齐尝试。

没有片段的那个是相同但更容易阅读。

$(window).on('load', function () {
$('#francepopup').modal('show');
    });
    .fr-title-popup-margin {
        margin-top: 20px;
    }

    .fr-popup-title {
        font-size: 24px;
        font-family: 'Montserrat', sans-serif;
        color: #008cc0;
        font-weight: 800;
        text-align: center;
    }

    .modal-fr-btn {
        border-radius: 40px;
        height: 25px;
        width: 80px;
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-weight: 800;
    }

    .dont {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 6px;
    }

    .fr-flags {
        margin: 0 auto;
    }

    .fr-text {
        margin: 0 auto 0 3px
    }

    @media (min-width: 992px) {
        .modal-dialog {
            width: 30%;
        }
    }

    @media (max-width: 991px) {
        .pr {
            float: right;
        }

        .pl {
            float: left;
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <button type="button" class="close close-fr-popup" data-dismiss="modal">&times;</button>

            <div class="fr-popup-title">
                <div class="modal-title">
                    <div class="row fr-title-popup-margin">
                        Are you or is someone
                    </div>
                    <div class="row">
                       you know
                    </div>
                    <div class="row">
                        a migrant in France?
                </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-4 pl col-md-push-2">
                        <button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
                            Yes
                        </button>
                    </div>

                    <div class="col-xs-4 btn-col pr col-md-push-3">
                        <button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
                            No
                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
</body>
html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal
1个回答
1
投票

我只是编辑你的代码，我希望它是你真正需要的:)

$(window).on('load', function () {
$('#francepopup').modal('show');
    });
 .fr-title-popup-margin {
        margin-top: 20px;
    }

    .fr-popup-title {
        font-size: 23px;
        font-family: 'Montserrat', sans-serif;
        color: #008cc0;
        font-weight: 800;
        /*text-align: center;*/
    }

    .modal-fr-btn {
        border-radius: 40px !important;
        /*height: 25px;*/
        width: 80px;
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-weight: 800;
    }

    .dont {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 6px;
    }

    .fr-flags {
        margin: 0 auto;
    }

    .fr-text {
        margin: 0 auto 0 3px
    }

    @media (min-width: 992px) {
        .modal-dialog {
            width: 30%;
        }
    }

    @media (max-width: 991px) {
        .pr {
            float: right;
        }

        .pl {
            float: left;
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
    <div class="modal-dialog modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <button type="button" class="close close-fr-popup" data-dismiss="modal">&times;</button>

            <div class="fr-popup-title">
                
                <div class="modal-title">
                  <div style="display:flex">
                    <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
                    <div style="max-width:49.33333333%; text-align:center">
                      Are you or is someone <br/>
                      you know <br/>
                      a migrant in france?
                    </div>
                    <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
                  </div>
                </div>
            </div>
            <div class="modal-body">
                <div style="display:flex">
                  <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
                  <div style="max-width:49.33333333%; flex: 0 0 49.33333333%">
                  <button type="button" style="float:left; width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
                      Yes
                    </button>
                    
                    <button type="button" style="float:right;width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
                      No
                    </button>
                  </div>
                  <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
                 
              </div>
              <br/>
               <div style="display:flex">
                    <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
                    <div style="max-width:49.33333333%; flex: 0 0 49.33333333%; text-align:right; margin-top:-15px">
                        (Please dont ask  <br/> me this again)
                    </div>
                    <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
              </div>
             
          </div>

      </div>

  </div>
</div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.