如何在模式中将行居中？
我正在使用bootstrap 3，我无法在其中居中放置项目，我在此处插入了代码，但看起来与网站不一样。
$('#modall').modal('show'); .fr-popup-btn-margin-left{
margin-left:1.7vw !important;
}
.fr-title-popup-margin{
margin-top:20px;
}
.fr-popup-btns{
text-align:center;
}
.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;
padding: 0;
}
.dont{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size:10px;
}
.first-row-popup {
padding: 0 !important;
margin-top:0px;
margin-right:0px;
margin-left:0px;
margin-bottom:10px;
}
@media (min-width: 992px){
.pop2{
width:25vw;
}
.pop1{
width:30%;
}
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
<div class="modal fade" id="modall" role="dialog">
<div class="modal-dialog pop2 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>
</div>
<div class="modal-body">
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
</div>
</div>
</div>
请注意，在网站上，标记不在模态的中间，而是略微位于左侧。我不想添加填充或边距。
除了我在上面所做的尝试之外，我还尝试了text-center行和text-align: center和margin: 0 auto。什么都没用，似乎是在向左添加填充比向右添加更多。
1 个答案:
答案 0 :(得分：1)
您可以为此申请的最简单的解决方法：
.flag-col > .row {
display: flex;
justify-content: center;
}
$('#modall').modal('show');.fr-popup-btn-margin-left{
margin-left:1.7vw !important;
}
.fr-title-popup-margin{
margin-top:20px;
}
.fr-popup-btns{
text-align:center;
}
.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;
padding: 0;
}
.dont{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size:10px;
}
.first-row-popup {
padding: 0 !important;
margin-top:0px;
margin-right:0px;
margin-left:0px;
margin-bottom:10px;
}
@media (min-width: 992px){
.pop2{
width:25vw;
}
.pop1{
width:30%;
}
}
.flag-col > .row {
display: flex;
justify-content: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
<div class="modal fade" id="modall" role="dialog">
<div class="modal-dialog pop2 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>
</div>
<div class="modal-body">
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？