Question

我希望使用Bootstrap拥有一个包含4列的网站。我现在的问题是：在列内部文本不会中断（只有一行，进入下一个col）。

这是我的HTML：

<div class="row">
  <div class="col-xs-18 col-sm-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Fourth</h4>
  </div>
</div>

如何处理cols中的断点（我不想给它们固定的宽度）？

Answer 1

访问getbootstrap.com并了解有关bootstrap列的更多信息。

Bootstarp是12列网格布局。因此在bootstrap中没有名为col-xs-18的类。

这里col-xs- *适用于移动设备..更好地使用下面的所有四个类

<div class="row">
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Fourth</h4>
  </div>
</div>

Answer 2

将col-xs-18重写为col-xs-3

http://jsfiddle.net/apr7c4Lq/

  <div class="row">
  <div class="col-xs-3 col-sm-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Fourth</h4>
  </div>
</div>

Answer 3

Bootstrap有12列。所以你不能像<div class="col-xs-18 col-sm-3">那样写。如果您需要四列，可以像<div class="col-xs-3 col-sm-3">一样编写。 xs =超小型设备，xm =小型设备，md =中型设备，lg =大型设备。假设您需要为所有设备提供四列，然后您可以编写<div class="col-xs-3">。

列中的Bootstrap中断

3 个答案: