在引导程序中格式化 3 个按钮（响应式）答案

【问题标题】：Formatting 3 buttons in bootstrap (responsive)在引导程序中格式化 3 个按钮（响应式）
【发布时间】：2015-12-21 23:56:02
【问题描述】：

我只是想知道格式化三个按钮的最佳方式是什么，以便它们在各种屏幕尺寸上正确显示。所以，这就是我到目前为止所做的，它在 1200 像素宽度的屏幕上看起来不错。

我所做的是使用按钮并将它们放入 span4 类中。像这样：

<div class="row-fluid">
  <div class="span4">
    <a class="header-btn" href="#">Testbutton 1</a>
  </div>
  <div class="span4">
    <a class="header-btn" href="#">
      Testbutton 2
    </a>
  </div>
  <div class="span4">
    <a class="header-btn" href="#">Testbutton 3</a>
  </div>
</div>

但是，当我缩小屏幕尺寸时，它看起来很糟糕，并且按钮会损坏。

一旦屏幕尺寸太小，我希望按钮显示在另一个下方。

我可以从 bootstrap 编辑 span4 类，但这可能会与其他布局混淆......所以我应该添加一个新类并使所有内容都响应，还是使用 bootstrap 框架？

请指教。谢谢！

【问题讨论】：

什么版本的 Bootstrap？
我认为你没有正确使用 Bootstrap，span4 不是 Bootstrap 使用的类，如果你想要一行 3 个按钮，那应该是 col-sm-4
我相信是 2.3.0。
@Lee 从技术上讲，代码是正确的，因为他使用的是版本 2：getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
考虑升级到 v3 或 v4 alpha。

标签： css responsive-design

【解决方案1】：

您似乎在 v2 中使用它，所以您可能没有正确加载引导程序。

但我建议升级到 v3 或 v4，您可以在 Docs 中了解更多信息。 http://getbootstrap.com/css/#grid

所有按钮将彼此水平内联，但随着屏幕变小。按钮将调整，然后彼此垂直移动。取决于你如何设置它。但这使它具有响应性。

你可能想要这样的东西，在 html 中：

！ 要查看一切正常运行，请单击运行 sn-p 按钮。点击整页，然后将浏览器的一侧拖得越来越小，您会看到按钮调整。！

我希望这会有所帮助！

.div-container{
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
 }

button{
  margin-left: 45% !important;
}

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

<div class='div-container'>
  <div class='row'>
    <div class='col-sm-4'>
      <button class='btn btn-primary'>CLICK</button>
    </div>
    <div class='col-sm-4'>
      <button class='btn btn-primary'>CLICK</button>
    </div>
    <div class='col-sm-4'>
       <button class='btn btn-primary'>CLICK</button>
    </div>
  </div>
</div>

【讨论】：