Question

我喜欢将我的主页分成3部分。基本上水平分割30％，70％然后将第二行分成两个50％，50％的列我知道的唯一方法是使用frameset，但因为我需要使用bootstrap。

Answer 1

Bootstrap有列，这些列将页面分为12个部分。因此，如果您希望将行划分为50％50％，则可以在下面查看如何执行此操作。

HTML

<div class="row">
  <div class="col-xs-6">
    test
  </div>
  <div class="col-xs-6" style="background-color:red">
    test
  </div>
</div>

CSS

.row .col-xs-6{
  height: 100px;
  background-color: black;
  color: white;
}

https://jsfiddle.net/7g7Lh2L2/3/

所以如果你想添加不同的宽度然后在xs之后更改列号，我建议你看一下网格的bootstrap。

Answer 2

试试这个：

    <!DOCTYPE html>
    <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3" style="background-color:lavender;">One</div>
        <div class="col-sm-9" style="background-color:lavenderblush;">Two</div>
      </div>
      <div class="row">
        <div class="col-sm-6" style="background-color:lavender;">Three</div>
        <div class="col-sm-6" style="background-color:lavenderblush;">Four</div>
      </div>
    </div>

    </body>
    </html>

如何使用Bootstrap分割水平和垂直页面

2 个答案: