在引导中填充/调整空div

Question

嗨，我在下面这个引导网格上工作。

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

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

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

为了获得我想要的外观，但是当站点缩小时，div的一部分就会在其他div的后面结束。

有人能告诉我怎样才能得到我想要的结果吗？

我相信一定还有比我现在使用的方法更好的方法来调整margin-bottom和padding-bottom

指向小提琴的链接

​

/* 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>

​

Answer 1

实际上，现在我们已经有了当前的CSS，下面这是一个丑陋的黑客。

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

所以，使用flexbox

​

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;
}
/****************************/

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

​

Answer 2

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

JSFIDDLE