Question

我正在使用Bootstrap开发一个网页。这是我第一次使用这个框架，我遇到了一个关于网格系统的问题，我不知道如何解决它。

我有3列，我希望它们之间有相同的边距。

<div class="container">
        <div class="row" id="interlineado-25">
            <div class="col-xs-12 col-sm-3 well">
                <img src="src/imagenes/disenyo.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Diseño</small></h1>
            </div>
            <div class="col-xs-12 col-sm-3 col-sm-offset-1 well section-img">
                <img src="src/imagenes/programo.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Programación</small></h1>
            </div>
            <div class="col-xs-12 col-sm-3 col-sm-offset-1 well">
                <img src="src/imagenes/android-apps.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Android Apps</small></h1>
            </div>
        </div>
</div>

使用此代码的问题是右侧有一列，我无法填充它，三个图像不居中。

Answer 1

没有一种很好的方法可以使用本机引导功能来完成您的尝试。

您可以继续使用行的ID和:first-child来获得第一列所需的额外保证金：

@media (min-width: 768px){
  #interlineado-25 > div:first-child{
    margin-left: 4.166666666%;
  }
}

Bootply

或者，您可以将井放在列中，每列占4/12：

<div class="container">
  <div class="row" id="interlineado-25">
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/disenyo.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Diseño</small></h1>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/programo.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Programación</small></h1>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/android-apps.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Android Apps</small></h1>
      </div>
    </div>
  </div>
</div>

Bootply

注意：ID属性必须是唯一的，文档范围很广。 id="section-img"应该是一个班级。

Twitter Bootstrap中的等间距列

1 个答案: