两行中的两列与Bootstrap

Question

我正在尝试更多地学习Bootstrap网格。我试图在页面中间的两行中得到两列。 所以看起来应该是这样的：

这是我到目前为止所得到的：

  

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6">
      <div id="text1">
        <label>Text 1</label>
      </div>
      <div id="text2">
        <label>Text 2</label>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6">
      <div id="text3">
        <label>Text 3</label>
      </div>
      <div id="text4">
        <label>Text 4</label>
      </div>

    </div>
  </div>
</div>

但是我的元素不在我想要的地方。

Answer 1

以下是小提琴中的解决方案：Solution 1

现在解释问题：

首先，您需要设置特定列。请记住，Bootstrap的网格为 12 。因此，您的最大值可以始终 12 。但是，您不需要列填充整个网格。

您可以使用名为偏移的内容，它允许您在元素中放置空格。让课程class="col-md-5 col-lg-5 col-sm-5 offset-1"为您提供值为5的列，这样您就可以实际定位2列并在侧面留出空间。

我建议通过Bootstrap网格进行游戏，以便熟悉如何操作它。 样式表margin-left:25px; margin-top:25px;为您提供列本身顶部和侧面的空间。