web-dev-qa-db-ja.com

Bootstrap垂直グリッド

ブートストラップを使用してグリッドシステムに垂直に配置する方法について質問があります。これが私がやろうとしていることです：最初に、画面を水平に2つの部分、左側の部分8、右側の部分4に分割する必要があります。次に、左側の部分を再び垂直に分割する必要があります。上面にテーブルがあります。初期化。下部には、再び各部分の2つの水平方向のアネに分割されたパネルが表示されます。 [1]

垂直部分はどうすればいいですか？

<div class="row">
   <div class="col-md-8" id="leftside">
      ?
      ?
      ?
   </div>
   <div class="col-md-4" id="rightside">
      ...
   </div>
twitter-bootstrapgrid
6
yangsunny

これをチェックして：

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row">
    <div class="col-md-8" style="height:500px;background-color:green;">
      <div class="row" style="height:50%;background-color:red;">
        <div class="col-md-12">
          <p>A</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <p>B</p>
        </div>
        <div class="col-lg-6" >
          <p>C</p>
        </div>
      </div>
    </div>
    <div class="col-md-4" style="height:500px;background-color:black">

    </div>
  </div>

</body>

</html>

Codepen： http://codepen.io/anon/pen/dYVxGa

5
Ubiquitous Developers
  <div class="row">
    <div class="col-md-8"> <!-- leftside -->
      <div class="row">
        <div class="col-md-12" style="background-color:blue;">table</div>
      </div>
      <div class="row">
        <div class="col-md-6" style="background-color:yellow;">panel1</div>
        <div class="col-md-6" style="background-color:green;">panel2</div>
      </div>
    </div>
    <div class="col-md-4" style="background-color:red;height:40px">rightside</div> <!-- rightside -->
  </div>

<hr>
<!-- code without bg-color -->

  <div class="row">
    <div class="col-md-8"> <!-- leftside -->
      <div class="row">
        <div class="col-md-12">table</div>
      </div>
      <div class="row">
        <div class="col-md-6">panel1</div>
        <div class="col-md-6">panel2</div>
      </div>
    </div>
    <div class="col-md-4" style="height:40px">rightside</div> <!-- rightside -->
  </div>

注：「右側」の列にカスタムの高さを指定する必要があることを確認してください。

コードペン： https://codepen.io/AnoNewb/pen/zjebGb

1
anoNewb