如何在Bootstrap中使用较小的div

Question

使用 bootstrap 3.3.7。 下面链接中提供了所需的结构。问题是尽可能使用较少的 divs 来解决这种网格系统。 首先，我们有一个带有类别 col 的 div，它占用整个块。接下来，在大屏幕上，我们有另一个网格，也占用整个块。而在手机上，第一个网格将占用左侧，另一个网格将占用右侧。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 col-xs-12">
    <div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
      <span> here goes the image  on the top
                    - on small device it should be to the left 
                    </span>
    </div>
    <div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
      <span> here goes the content on the bottom that include some other grids
                    - on small device it should be to the right of the image above
        </span>
    </div>
  </div>
  <div class="col-md-3 col-md-offset-6 col-xs-12">
    <div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
      <span>
        *Second div*
        here goes the image  on the top
                    - on small device it should be to the left 
                    </span>
    </div>
    <div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
      <span> here goes the content on the bottom that include some other grids
                    - on small device it should be to the right of the image above
        </span>
    </div>
  </div>
</div>

- Zaven Lepedjian

---

你能添加一张图像来说明你想要实现的内容吗？ - Tschallacka

你应该使用Bootstrap将所有以 col- 开头的元素包装在 .row 中。 - zgood

“尽可能使用较少的div”是什么意思？ - neophyte

“较小的div”是指我不想有很多嵌套的div。 - Zaven Lepedjian

你想要的是这个吗？：http://www.codeply.com/go/AuqWTubRUg 还是窄视口下列之间应该有空格？ - Banzay

Answer 1

使用这些代码并更改您的col-xs-[] col-md-[]，尽情享受吧。

.border{
border:1px solid red;
}
.height{
min-height: 100px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">

<div class="row">
  <div class="col-xs-4 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
  <div class="col-xs-8 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-4 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
  <div class="col-xs-8 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
</div>

</div>

- amirrr1987