引导网格如何让我的列折叠在一起？答案

【问题标题】：Bootstrap grid How do I make my columns collapse together?引导网格如何让我的列折叠在一起？
【发布时间】：2016-01-03 05:22:29
【问题描述】：

我是 html、css 和 bootstrap 的新手。我试图让我的白色和灰色盒子一起折叠，但我似乎无法得到它。崩溃时我正在寻找这样的东西。

这里是代码：codepen.io

另外，如果你们有更多的指点，请 lmk 我在这里做错了什么。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

解决此问题的一种方法是将 thumbnail 与购物车控件分开，这样您就可以更好地控制每个部分。

在关闭thumbnail div 后创建一个 div，这样您就可以在缩略图之外设置这些元素的样式。

在整页查看工作片段。

body {
  background-color: #2b2a2f;
}
h1 {
  color: #D1D2D6;
}
div.thumbnail {
  padding: 15px;
  margin-bottom: 0;
  border-radius: 0;
}
.cart-container {
  background: #D1D2D6;
  border-top: 3px solid #2b2a2f;
  padding: 5px 10px 10px;
}
.cart-controls {
  display: table;
  vertical-align: middle;
  padding: 10px 0px;
}
.cart-controls h2 {
  color: #FDFEFE;
  display: table-cell;
  vertical-align: middle;
}
.cart-controls h5 {
  color: #FDFEFE;
  position: absolute;
  right: 100px;
  font-weight: bold;
}
.cart-controls select.select-width {
  width: auto;
  position: absolute;
  right: 25px;
  border-radius: 0;
}
.cart-container .btn-cart {
  background-color: #EF2E27;
  color: #FDFEFE;
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-4">
      <h1>Yeezy 350</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <h5>QTY</h5>
          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

    <div class="col-md-4">
      <h1>Yeezy 351</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <h5>QTY</h5>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

    <div class="col-md-4">
      <h1>Yeezy 352</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <h5>QTY</h5>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

  </div>
  <div class="row">

    <div class="col-md-4">
      <h1>Yeezy 353</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <h5>QTY</h5>
          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

    <div class="col-md-4">
      <h1>Yeezy 354</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <h5>QTY</h5>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

    <div class="col-md-4">
      <h1>Yeezy 355</h1>

      <div class="thumbnail">
        <img class="img-responsive" src="http://bit.ly/1JPSaOa">
      </div>
      <div class="cart-container">
        <div class="cart-controls">
          <h2>$200</h2>

          <select class="form-control select-width">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <h5>QTY</h5>

        </div>
        <button class="btn btn-cart btn-block">Add to Cart</button>

      </div>
    </div>

  </div>
</div>

【讨论】：

这家伙真是太棒了！这正是我需要的谢谢。我需要将您的代码与我的代码进行比较，以便确保我了解发生了什么。

【解决方案2】：

更改您的<div class="col-md-4">

收件人：

<div class="col-md-4 col-xs-12">

【讨论】：

这解决了堆叠问题，但两个盒子分开了，灰色盒子里的所有内容都乱了。