引导程序嵌套变得很糟糕

Question

我在项目中使用Bootstrap网格嵌套时遇到了问题。我已经创建了一个网格为12的div和一个带有背景图像的类。

在那之后，我创建了另外3个网格，其中一个是8，最后一个是1，总共有12个。然而，当我复制它时，它并没有像预期的那样转到下一行。

查看它的链接是：https://www.neevasoft.com/test/saude.html

代码如下：

 <article id="blog-list" class="blog-list article3 gradient-7">
    <div class="container">
      <div class="row">
          <h2 class="title text-center">Saúde</h2>
          <div class="item col-md-12 col-sm-12 col-xs-12"> 
              <div class="item1 col-md-3 col-sm-3 col-xs-3">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          <img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
                      </a>
                  </figure>
              </div>
              <div class="item2 col-md-8 col-sm-8 col-xs-8">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          Espaço Corporal Eloiza Bovió
                      </a>
                  </figure>
              </div>
              <div class="item3 col-md-1 col-sm-1 col-xs-1">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          <i class="fa fa-angle-right" aria-hidden="true"></i>
                      </a>
                  </figure>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          <img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
                      </a>
                  </figure>
              </div>
              <div class="col-md-8 col-sm-8 col-xs-8">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          Espaço Corporal Eloiza Bovió
                      </a>
                  </figure>
              </div>
              <div class="col-md-1 col-sm-1 col-xs-1">
                  <figure class="figure-wrapper">
                      <a href="interno.html">
                          <i class="fa fa-angle-right" aria-hidden="true"></i>
                      </a>
                  </figure>
              </div>
            </div><!--//row-->
        </div><!--//container-->
    </article>  

Answer 1

您不应该嵌套col*div

尝试使用以下命令：

<article id="blog-list" class="blog-list article3 gradient-7">
<div class="container">
    <div class="row">
        <h2 class="title text-center">Saúde</h2>
        <div class="item1 col-md-3 col-sm-3 col-xs-3">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="">
                </a>
            </figure>
        </div>
        <div class="item2 col-md-8 col-sm-8 col-xs-8">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    Espaço Corporal Eloiza Bovió
                </a>
            </figure>
        </div>
        <div class="item3 col-md-1 col-sm-1 col-xs-1">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                </a>
            </figure>
        </div>

    </div><!--//row-->
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="">
                </a>
            </figure>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    Espaço Corporal Eloiza Bovió
                </a>
            </figure>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1">
            <figure class="figure-wrapper">
                <a href="interno.html">
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                </a>
            </figure>
        </div>
    </div>
</div><!--//container-->

​

Answer 2

这就是我设法修复它的方法

<article id="blog-list" class="blog-list article3 gradient-7">
<div class="container">
  <div class="row">
    <h2 class="title text-center">Saúde</h2>
      <div class="item col-xs-12"> 
       <div class="col-xs-12">
        <div class="item1 col-xs-3">
            <figure class="figure-wrapper">
                <a href="interno.html"><img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt=""></a>
            </figure>
        </div>
        <div class="item2 col-xs-8">
            <figure class="figure-wrapper">
                <a href="interno.html">Espaço Corporal Eloiza Bovió</a>
            </figure>
        </div>
        <div class="item3 col-xs-1">
            <figure class="figure-wrapper">
                <a href="interno.html"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </figure>
        </div>
        </div>

        <div class="col-xs-12">
        <div class="item1 col-xs-3">
            <figure class="figure-wrapper">
                <a href="interno.html"><img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt=""></a>
            </figure>
        </div>
        <div class="item2 col-xs-8">
            <figure class="figure-wrapper">
                <a href="interno.html">Espaço Corporal Eloiza Bovió</a>
            </figure>
        </div>
        <div class="item3 col-xs-1">
            <figure class="figure-wrapper">
                <a href="interno.html"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </figure>
        </div>
        </div>
    </div>
  </div><!--//row-->
</div><!--//container-->