Bootstrap网格如何使我的列折叠在一起？

Question

我是html，css和＆amp;的新手。引导。我试图让我的白色和灰色盒子一起折叠，但我似乎无法得到它。 在崩溃时我正在寻找类似的东西。

123
456

1
4
2
5
3
6

以下是代码：codepen.io

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

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

Answer 2

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

要：

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