我正在使用bootstrap 3模态,被要求做的设计是
请注意图形设计师如何将一个按钮与文本的开头垂直对齐,并将另一个按钮与文本的结尾垂直对齐。
我的代码是
<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">×</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>
答案 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">×</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>