ブートストラップcol-md divを縦に半分に分割する方法は？

私はブートストラップグリッドを使って以下のレイアウトを作ろうとしています。コンテナ<div class="row">とその半分の2つのdivs（<div1> and <div2>）があります。 <div1>の高さはコンテンツサイズとして変更可能です。もう一度、<div2>には、それぞれが<div1>の半分の2つの子div（<div2-1>, <div2-2>）が必要です。どのように私はこのレイアウトをブートストラップグリッドで作ることができますか？ブートストラップcol-md divを縦に半分に分割する方法は？

私はそのようにしようとしたが、動作していません。：

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

出典

2016-10-13 Juntae

これを試してみてください...

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>

出典

2016-10-13 05:14:44 Sankar

これは、高さが自動でどのような場合..固定柱の高さを維持することですか？ –

@JonesJoseph私は同意します... div1の高さを指定することはできません... – Juntae

こんにちは、それはあなたが

<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

出典

2016-10-13 05:19:28

コンテンツを追加すると、＃text1の高さが増えます。どのくらい起こるべきではない –

私は前に彼のスタイルに従ってカスタムCSSを追加できることを言及しています。これを内容に応じて高さを調整しました。カスタムcss @jones –

あなたは、colunmnの高さをautoにし、内側のdivをその半分にしたい場合は、jQueryを使用できます。

ただし、1つのdivの内容が保持できる以上のものがある場合は、overflow-y〜autoのままにしておきたい場合があります。

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

出典

2016-10-13 05:28:35

ブートストラップcol-md divを縦に半分に分割する方法は？

答えて

関連する問題