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

时间:2019-03-01 19:21:59

标签: html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

我正在使用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>

1 个答案:

答案 0 :(得分: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>