我正在使用引导程序模板,我需要在团队部分中将两个元素居中。
元素位于div class =“ col-md-3 col-sm-3 col-xs-12”内,而此元素位于div class =“ team-top”内,而此元素位于div class =“ row ”。我仍然是引导程序的新手,因此很难找到必须修改的类。
每个元素都有描述每个团队成员的图像和文本。
actual situation
这是代码。
<div id="team" class="our-team-area area-padding">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="section-headline text-center">
<h2>Nuestro Equipo</h2>
</div>
</div>
</div>
<div class="row">
<div class="team-top">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/1.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Daniel Cárdenas</h4>
<p>Músico, Ingeniero en y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="single-team-member">
<div class="team-img">
<a href="#">
<img src="img/team/2.jpg" alt="">
</a>
<div class="team-social-icon text-center">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-content text-center">
<h4>Ignacio Weisser</h4>
<p>Músico, Ingeniero en Sonido y Cofundador de Conectarte Studio</p>
</div>
</div>
</div>
<!-- End column -->
</div>
</div>
</div>
</div>
<!-- End Team Area -->
我试过了
.team-top{
text-align:center;
margin: 0 auto;
display: block;
}
.team-top{
left: 0;
right: 0;
margin: 0 auto;
}
.team-top{
margin-right: auto;
margin-left: auto;
}
并将类添加到div class =“ row”和div class =“ col-md-3 col-sm-3 col-xs-12”和div class =“ single-team-member”,但我仍然相信我必须添加CSS到div class =“ team-top”
任何帮助,将不胜感激
最佳答案
要在引导行中定位列或对列进行重新排序,可以使用“推”,“拉”或“偏移”(bootstrap doc)。
偏移量为列增加了左边距。
<div class="row">
<div class="col-md-3 col-sm-3 col-sm-offset-3 col-xs-12"></div>
<div class="col-md-3 col-sm-3 col-xs-12"></div>
</div>