Question

我想在这里写一些专栏：

<div class="container-fluid" id="content">
  <div class="row" id="slideshow">
    <div class="col-xs-12">
      <h1 id="greeting">Welcome to Website.com!</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 centerButton" id="button1">
      button 1
    </div>
    <div class="col-xs-12 col-sm-6 centerButton" id="button2">
      button 2
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 centerButton" id="button3">
      button 3
    </div>
    <div class="col-xs-12 col-sm-6 centerButton" id="button4">
      button 4
    </div>
  </div>
</div>

我想要一个大的矩形按钮4个按钮（2x2），但所有4个div都是堆叠的。我甚至尝试过没有添加“col-xs-12”类。我用bower安装了正确版本的bootstrap，而其他bootstrap类似乎运行得很好。我还尝试重新安排容器的范围，包括欢迎消息和幻灯片位，并将其排除，以制作一个简单而纯粹的列块。甚至像“col-sm-1”这样的cloumns垂直堆叠。我知道有类似的问题，但我已经尝试了所有这些问题的解决方案，没有什么对我有用。

Answer 1

Bootstrap运行正常，但您的屏幕大小可能处于xs级别，这意味着col-xs-12会将列呈现为全宽部分。尝试将每个col-xs-12 col-sm-6更改为col-xs-6：

<div class="container-fluid" id="content">
  <div class="row" id="slideshow">
    <div class="col-xs-12">
      <h1 id="greeting">Welcome to Website.com!</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 centerButton" id="button1">
      button 1
    </div>
    <div class="col-xs-6 centerButton" id="button2">
      button 2
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 centerButton" id="button3">
      button 3
    </div>
    <div class="col-xs-6 centerButton" id="button4">
      button 4
    </div>
  </div>
</div>

应该让每个按钮显示在半宽部分中。有关示例，请参阅此Bootply。

使用按钮看起来与此类似：

<div class="row">
  <div class="col-xs-6 centerButton form-group" id="button1">
    <button class="btn btn-default btn-block">1</button>
  </div>
  <div class="col-xs-6 centerButton form-group" id="button2">
    <button class="btn btn-default btn-block">2</button>
  </div>
   <div class="col-xs-6 centerButton form-group" id="button3">
    <button class="btn btn-default btn-block">3</button>
  </div>
  <div class="col-xs-6 centerButton form-group" id="button4">
    <button class="btn btn-default btn-block">4</button>
  </div>
</div>

Bootply 2

Bootstrap列只是垂直堆叠

1 个答案: