How to divide bootstrap col-md div to half vertically?

问题

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>

回答1:

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>

回答2:

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>

回答3:

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

回答4:

//Try this one...

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
	<div class="row" border="1">
	    <div class="col-md-6" border="1">
        <h3>First Column</h3>
    	</div>
        <div class="col-md-6" border="1">
        	<div class="row bg-danger">
            	<h3>Second Column First Row<h3>
            </div>
            <div class="row bg-success">
            	<h3>Second Column Second Row</h3>
            </div>
        </div>
    </div>
</div>
</section>
</body>
</html>

回答5:

Using Bootstrap 4

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
  <div class="col-md-6">
    <div class="row h-100 flex-column">
      <div class="col-md-6 mw-100 bg-danger"></div>
      <div class="col-md-6 mw-100 bg-success"></div>
    </div>
  </div>
</div>

<style>
  /* just for displaying correctly without content */
  
  [class*='col'] {
    min-height: 200px;
  }
</style>

回答6:

 <!DOCTYPE html>
<html>

<head>
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/shiny.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>

.cn {
    background-color: antiquewhite;
    height: 50%;
    top: 50%;
    position: relative;
}
.video-player-container{
    height: 500px;
    background-color: gray;
}
.video-container{
    min-height: 350px;

}

    </style>
<body>

  <h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
    <div class="cn"></div>

  </div>
</body>
</html>

来源：https://stackoverflow.com/questions/40012682/how-to-divide-bootstrap-col-md-div-to-half-vertically

标签

css

twitter-bootstrap