Question

我正在使用 Bootstrap 开发一个FE接口，但是对于 SM大小的框有问题，而不是占用空的空间并浮动到左侧，这些框离开一个空白点并进行换行......

这是问题的截图：

http://i.stack.imgur.com/bHJDF.png *

该部分的HTML标记（连续四篇文章）：

<!-- Articulo -->
  <article class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
    <a href="" class="hidden-xs"><img src="http://placehold.it/730x300" alt="" class="img-responsive"></a>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <h2><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h2>
      <footer class="col-lg-12">
        <ul class="listaInline">
          <li><a href=""><i class="fa fa-clock-o"></i> xx/xx/xxxx</a></li>
          <li><a href=""><i class="fa fa-user"></i> Editor</a></li>
          <li><a href=""><i class="fa fa-comment"></i> Comentario</a></li>
        </ul>
      </footer>
      <p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.
      <a href="">Leer más <i class="fa fa-share"></i></a></p>
    </div>
  </article>

文章的CSS：

/****************************************************************************************************
A R T I C U L O S
*****************************************************************************************************/
article {
    margin-top: 2.2em;
    padding: 0;
}

article:first-child {
    margin-top: 0;
}

article > div {
    padding: 0;
    padding-bottom: 1em;
    border-bottom: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    border-left: 1px solid #E9E9E9;
    background-color: #fff;
}

article h2 a {
    color: #1d1d1b;
    font-family: 'Roboto Slab', serif;
}

article footer {
    padding: 0 !important;
}

article footer li {
    margin-right: 1em;
}

article footer li a {
    color: #c1c1c0;
}

媒体查询CSS：

    /****************************************************************************************************
A R T I C U L O S
*****************************************************************************************************/
article {
    margin-top: 0;
    margin-bottom: 2.2em;
}

article > div {
    padding: 0;
}

article > #contenido {
    border-top: 1px solid #E9E9E9;
}

article h2 a {
    font-size: 0.6em;
    line-height: 1em;
}

希望你能帮助我，问候并感谢所有人！

Bootstrap文章留空（SM大小）

0 个答案: