触摸按钮在boostrap(Touch buttons in boostrap)

触摸按钮在boostrap(Touch buttons in boostrap)

在bootstrap中，我们可以定义按钮组，并通过设置一个名为btn-group-lg的类来制作更大的按钮：

<div class="btn-group btn-group-lg" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

这个标记有这样的结果：

我想知道是否有办法让它变成这样：

in bootstrap we can define button groups and make the bigger buttons by setting a class called btn-group-lg:

<div class="btn-group btn-group-lg" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

This mark up has this result:

I wonder If there's a way to make it like this:

最满意答案

删除btn-group btn-group-lg类。 使用可以根据您的布局和需求编辑此代码。

<div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1" style="clear:left"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div>

Remove the btn-group btn-group-lg class. Use can edit this code according to your layout and needs.

<div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1" style="clear:left"> <button type="button" class="btn btn-default">Right</button> </div> <div class="col-md-1"> <button type="button" class="btn btn-default">Right</button> </div>