在bootstrap中填充/调整空div

时间：2016-07-02 15:30:53

标签： html css twitter-bootstrap twitter-bootstrap-3

我正在下面的这个引导网格上工作。

我希望第一列col-1与右侧的两列具有相同的height。

max-height似乎没有做到这一点，我一直在使用：

.col-1{
    background-color: #555;
    margin-bottom: -600px;
    padding-bottom: 600px;
}

获得我想要的外观，但当网站缩小时，div的一部分会在另一个div后面结束。

有人可以告诉我如何获得我想要的结果吗？

我不知何故相信必须有另一种方法来做到这一点，而不是我用来调整margin-bottom和padding-bottom

指向fiddle

的链接 

/* GRID */

.col-1 {
  background-color: #555;
  margin-bottom: -600px;
  padding-bottom: 600px;
}
.col-2 {
  background-color: #558C89;
}
.col-3 {
  background-color: #74AFAD;
}
.col-4 {
  background-color: #D9853B;
}
.col-5 {
  background-color: #ECECEA;
}
.col-6 {
  background-color: #F3FAB6;
}
.col-7 {
  background-color: #CBE32D;
}
.col-8 {
  background-color: #A8CD1B;
}
.col-9 {
  background-color: #005A31;
}
/****************************/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="container">
  <div class="row">

    <div class="col-md-6 col-1">
      Some text here

    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6 col-2">
          <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
            salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
        </div>

        <div class="col-md-6 col-3">
          <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
            salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
        </div>

        <div class="col-md-6 col-4">
          <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
            salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
        </div>

        <div class="col-md-6 col-5">
          <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies
            salvia ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-6">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-7">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-8">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-9">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>
  </div>

</div>

2 个答案:

答案 0 :(得分：3)

实际上现在有了我们现有的CSS，下面碰巧是一个丑陋的黑客。

.col-1{
    background-color: #555;
    margin-bottom: -600px;
    padding-bottom: 600px;
}

因此，请使用flexbox：

＆＃13;
＆＃13; 
body,
p {
  margin: 0 !important
}
body {
  padding-top: 70px;
}
/* NAVBAR */

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in {
  display: block !important;
}
/****************************/

/* GRID */

span.glyphicon {
  display: block;
  text-align: center;
  font-size: 5em;
  padding-top: 15%;
}
.container > .row {
  display: flex;
  flex-wrap: wrap
}
@media (max-width: 992px) {
  .container > .row > [class^="col-"] {
    flex: 0 0 100%;
  }
}

.col-1 {
  background-color: #555;
  border: solid 5px #fff;
}
.col-2 {
  background-color: #558c89;
  border: 5px solid #fff;
  min-height: 250px;
}
.col-3 {
  background-color: #74AFAD;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-4 {
  background-color: #D9853B;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-5 {
  background-color: #ECECEA;
  min-height: 250px;
  padding: 5px;
  border: solid 5px #fff;
}
.col-6 {
  background-color: #F3FAB6;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-7 {
  background-color: #CBE32D;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-8 {
  background-color: #A8CD1B;
  min-height: 250px;
  border: solid 5px #fff;
}
.col-9 {
  background-color: #005A31;
  min-height: 250px;
  border: solid 5px #fff;
}
/****************************/
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-6 col-1 row-eq-height">
      Daði Hall
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6  col-2 text-center">
          <p>Web design</p>
          <span class="glyphicon glyphicon-console" aria-hidden="true"></span>


        </div>

        <div class="col-md-6 col-3">
          <p>Blog</p>
          <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>

        </div>

        <div class="col-md-6 col-4">
          <p>CV</p>
          <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>

        </div>

        <div class="col-md-6 col-5">
          <p>Photos</p>
          <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-6">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-7">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-8">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>

    <div class="col-md-3 col-9">
      <p>Celiac 3 wolf moon williamsburg pitchfork, squid helvetica single-origin coffee brooklyn paleo vice biodiesel. Fingerstache celiac mumblecore, try-hard yuccie helvetica chartreuse. Chartreuse wayfarers vegan, blue bottle bicycle rights selfies salvia
        ugh drinking vinegar 3 wolf moon you probably haven't heard of them. Cardigan fingerstache freegan 3 wolf moon vegan. Venmo umami 8-bit, cronut raw denim direct trade locavore vinyl seitan plaid tousled.</p>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

.col-1 {
  background-color: #555;
}
@media(min-width: 992px) {
  .col-1 {
    margin-bottom: -600px;
    padding-bottom: 600px;
  }
}

JSFIDDLE

相关问题
最新问题