格式化3个按钮在自举（响应）

我只是想知道什么是最好的方式来格式化三个按钮，以便他们在各种屏幕尺寸正确显示。所以，这是我迄今为止所做的，在1200像素宽的屏幕上它看起来不错。格式化3个按钮在自举（响应）

我所做的是我使用了按钮，并将它们放入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类，但这可能会混淆其他布局......所以，我应该只是添加一个新的类，使一切响应，或使用引导框架？

请指教。谢谢！

来源

2015-09-24 Maddrax

什么版本的引导呢？ – rybo111

我不认为你正确使用Bootstrap，span4不是Bootstrap使用的类，如果你想在一行中使用3个按钮，那应该是col-sm-4 – Lee

我相信它是2.3.0。 – Maddrax

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

但我建议升级到v3或v4，您可以在Docs中了解更多信息。 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>

来源

2015-09-24 15:12:39

格式化3个按钮在自举（响应）

回答

相关问题