问题描述:

I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?

I tried like that, but not working. :

<div class="row">

<div class="col-md-6" id="div1">

Some content...

</div>

<div class="col-md-6" id="div2">

<div id="div2-1" style="height:50%;">

</div>

<div id="div2-2" style="height:50%;">

</div>

</div>

</div>

网友答案:

Try this...

div {
  border: 1px solid black;
}
#div2-1,
#div2-2 {
  height: 50%;
  border: 1px solid red !important;
}
#div1,#div2{
  height:50px;
  
  }
#div2.col-xs-6
{
  padding:0px !important;
}
<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-xs-6" id="div1">
      Some content...
    </div>
    <div class="col-xs-6" id="div2">

      <div id="div2-1">

      </div>
      <div id="div2-2">

      </div>
    </div>
  </div>
</div>
网友答案:

you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.

But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.

$(document).ready(function() {

  var totHeight = $("#col").height();

  $("#div-1").css("height", totHeight / 2);
  $("#div-2").css("height", totHeight / 2);

})
body * {
  color: #ccc;
}
#div-1,
#div-2 {
  overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="row">
    <div class="col-sm-6" id="col">
      <div id="div-1" style="background-color:red;">
        Content
        <br>Content
      </div>
      <div id="div-2" style="background-color:blue;">

        Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content

      </div>
    </div>
    <div class="col-sm-6"></div>

  </div>

</body>
网友答案:

hello try the below fiddle hope it helps also add the custom style if you want to

<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
        <div id="navigation">
            <label>side Column</label>
        </div>           
    </div>
    <div class="col-xs-6 col-sm-6">
        <div id="text1">
            <label>First Divider</label>
        </div>
        <div id="text2">
            <label>second Divider</label>
        </div>
    </div>      
</div>
</div>

fiddle demo

相关阅读:
Top