Question

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

之后，我创建了3个其他网格，其中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- * divs

尝试使用：

<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-->

Bootstrap嵌套变坏了

2 个答案: