HTML Bootstrap - 显示两个按钮 50% 的 Div 宽度

Question

我有一个模式窗口，需要在底部显示两个按钮，例如使用 Bootstrap 按钮的 Proceed 和 Cancel。

我希望这些按钮并排占据 div 的整个宽度。

如果我将按钮的宽度设置为

50%

，它们会一个一个地显示在另一个之上。仅当我设置宽度（例如 49%）时，它们才会彼此相邻显示，但随后它们不会占据整个宽度。

我已经看过很多次了，但不知道该怎么做。

这是我正在做的示例代码：

<div align="center">
    <button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button>
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button>
</div>

Answer 1

在第一个

class

上添加

button

并给它

float:left

。这将是整个

width

。请参阅 Bootply 中的工作演示。

.hell {
  float: left
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div align="center">
  <button type="button" class="btn btn-warning hell" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font>
  </button>
  <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font>
  </button>
</div>

Answer 2

“btn-block”是您通常想要的，这样按钮就可以在其列内伸展（对于在 Google 中找到此内容的任何人）。

<div class="row">
    <div class="col-md-6">
        <button class="btn btn-warning btn-block">Cancel</button>
    </div>
    <div class="col-md-6">
        <button class="btn btn-success btn-block">Proceed</button>
    </div>
</div>

更新：btn-block已从Bootstrap 5.0中删除，如果您已升级，请尝试使用w-100。

Answer 3

这样做。

<div align="center">
   <div class="row">
     <div class="col-md-6">
        <button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button>
     </div>
    <div class="col-md-6">
         <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button>
     </div>
</div>

顺便说一句，你不应该使用align =“center”，这是老式的HTML，bootstrap已经有一个类，而不是这样做

<div align="center">

这样做

<div class="text-center">

这些 div 上的 col-md-6 类是建立 50% 的类，如果你想要更少，你可以使用其他类，如 col-md-1 一直到 col-md-12

希望有帮助。

Answer 4

如果您使用

inline blocks

那么您会遇到这个问题。

尝试使用

margin right

修复来防止包裹：

HTML

<div class="blocks">
    <div class="block block-1">Block 1</div>
    <div class="block block-2">Block 2</div>
</div>

CSS

.block {
    display: inline-block;
    width: 50%;
}

.block-1 {
    margin-right: -0.2em; /* spacing fix */ 
}

这里有一个 Codepen，可以修复您的场景：http://codepen.io/anon/pen/qZmKYr

Answer 5

Bootstrap 有

clearfix

类，可以使用

float-left

和

float-right

类。

使用方法如下：https://getbootstrap.com/docs/4.0/utilities/clearfix/

一个例子：

<div class="clearfix">
     <button type="button" class="btn btn-success float-left" style="width: 48%;">Save</button>
     <button type="button" class="btn btn-danger float-right" style="width: 48%;">Cancel</button>
</div>

Answer 6

如果你们中的任何人想使用纯引导类，请尝试这些。

引导5.x

父级

使用

d-flex

如果您需要按钮之间有间隙，请使用

gap-2

按钮元素

使用

flex-fill

占据全宽

              ↓     ↓
<div class="d-flex gap-2">                           ↓
    <button type="button" class="btn btn-warning flex-fill" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false"><font size="6">Cancel</font></button>
    <button type="button" class="btn btn-success flex-fill" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false"><font size="6">Proceed</font></button>
</div>

Answer 7

嗯，受到收到的评论的启发，我得到了一个可行的解决方案（无法判断它的优雅，但结果正是我想要的）：

<table style="width:100%">
    <tbody>
        <tr>
            <td class=" btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Cancel</font>
            </td>
            <td class=" btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Proceed</font>
            </td>
        </tr>
    </tbody>
</table>

这显示为两个矩形占据整个宽度，并随着屏幕正确缩小。