html - 如何在 Bootstrap 的列中创建响应式文本？

Question

我基本上创建了一个响应式网站，该网站分为两个部分。我正在尝试像这样以一行和两列的格式添加文本

代码:

<div class="container">
<div class="row">

    <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="centerBlock">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
        </div>

上面给出了我所做的示例。不包括的是外部行和列类。

我做错了什么？

Answer 1

如果您尝试简单地创建两列，下面的代码将起作用。您需要关闭您的 div 标签，您还需要使用以“6”结尾的类。以“4”结尾将为您提供 3 列。每行在 Bootstrap 中分为 12 列，因此使用 col-*-6 将分为两列，每列使用一半的空间。

    <div class="col-xs-6">
      <div class="centerBlock">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </div>
    </div>
    <div class="col-xs-6">
      <div class="centerBlock">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </div>
   </div>
  </div><!-- row-->
</div><!-- container -->