Bootstrap grid如何使我的列一起崩溃？ [英] Bootstrap grid How do I make my columns collapse together?

查看：100
本文介绍了Bootstrap grid如何使我的列一起崩溃？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对html，css，&引导。我试图让我的白色和灰色的盒子一起倒塌，但我似乎无法得到它。
我在寻找这样的东西时崩溃。

  123 
 456 
 
 1 
 4 
 2 
 5 
 3 
 6

以下是代码： codepen.io



另外如果你们有更多的指针，请点击这里我做错了。谢谢！

解决方案

一种可以解决这个问题的方法是将缩略图

在关闭缩略图之后创建一个div（s） 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;位置：绝对;右：100px; font-weight：bold;}。cart-controls select.select-width {width：auto;位置：绝对; right：25px; border-radius：0;}。cart-container .btn-cart {background-color：＃EF2E27;颜色：#FDFEFE; border-radius：0;}

< link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheet/>< div class =container> < div class =row> < div class =col-md-4> < h1> Yeezy 350< / h1> < div class =thumbnail> < img class =img-responsivesrc =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> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < div class =col-md-4> < h1> Yeezy 351< / h1> < div class =thumbnail> < img class =img-responsivesrc =http://bit.ly/1JPSaOa> < / DIV> < div class =cart-container> < div class =cart-controls> < H2> 200 $< / H2> < select class =form-control select-width> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < H5> QTY< / H5> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < div class =col-md-4> < h1> Yeezy 352< / h1> < div class =thumbnail> < img class =img-responsivesrc =http://bit.ly/1JPSaOa> < / DIV> < div class =cart-container> < div class =cart-controls> < H2> 200 $< / H2> < select class =form-control select-width> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < H5> QTY< / H5> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < / DIV> < div class =row> < div class =col-md-4> < h1> Yeezy 353< / h1> < div class =thumbnail> < img class =img-responsivesrc =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> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < div class =col-md-4> < h1> Yeezy 354< / h1> < div class =thumbnail> < img class =img-responsivesrc =http://bit.ly/1JPSaOa> < / DIV> < div class =cart-container> < div class =cart-controls> < H2> 200 $< / H2> < select class =form-control select-width> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < H5> QTY< / H5> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < div class =col-md-4> < h1> Yeezy 355< / h1> < div class =thumbnail> < img class =img-responsivesrc =http://bit.ly/1JPSaOa> < / DIV> < div class =cart-container> < div class =cart-controls> < H2> 200 $< / H2> < select class =form-control select-width> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < H5> QTY< / H5> < / DIV> < button class =btn btn-cart btn-block>添加到购物车< / button> < / DIV> < / DIV> < / div>< / div>

I am new to html, css, & bootstrap. I am trying to make both my white and gray boxes collapse together but I can't seem to get it. I am looking for something like this when collapsing.

123
456

1
4
2
5
3
6

Here is the code: codepen.io

Also if you guys have some more pointers please lmk what i'm doing wrong here. Thank you!

解决方案

One way you could go about this is to separate the thumbnail from your cart controls so you have more control over each section.

Create a div(s) after closing the thumbnail div so you can style those elements apart from the thumbnails.

See working Snippet at Full Page.

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>

这篇关于Bootstrap grid如何使我的列一起崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆