Question

我只是想知道格式化三个按钮的最佳方法是什么，以便它们能够在各种屏幕尺寸上正确显示。所以，这是我迄今为止所做的，它在1200px宽屏幕上看起来不错。

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

＆＃13;

<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>

＆＃13;

然而，当我缩小屏幕尺寸时，它看起来很糟糕并且按钮分解。

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

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

请指教。谢谢！

Answer 1

您似乎正在将它用于v2，所以也许您可能没有正确加载引导程序。

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

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

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

！ 当您点击运行代码段按钮时，要查看所有内容的工作方式。单击整页，然后将浏览器的一侧拖动越来越小，您将看到按钮调整。！

我希望这有帮助！

.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>

格式化bootstrap中的3个按钮（响应）

1 个答案: