我正在使用引导程序模板,我需要在团队部分中将两个元素居中。
元素位于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>

10-05 20:44
查看更多