我用的是bootstrap3,我不能在里面集中项目,我在这里插入了我的代码,但它看起来不像网站。
$('#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
. 什么都不管用,好像有什么东西在往左边加填充,而不是往右边。
