Question

我有一个模态窗口需要在底部显示两个按钮，例如继续和取消，使用Bootstrap按钮。

我希望这些按钮并排占据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

这样做。

<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 =＆＃34; center＆＃34;这个旧学校的HTML，bootstrap已经有了一个类，而不是这样做

<div align="center">

这样做

<div class="text-center">

这些div上的col-md-6类是建立50％的那些，如果你想减少你可以使用col-md-1之类的其他类，所有它们都可以达到col-md-12

希望有所帮助。

Answer 3

如果您使用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 4

嗯，受到收到的评论的启发，我得到了一个有效的解决方案（不能判断它的优雅，但结果是我正在寻找的）：

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

这显示为占据整个宽度的两个矩形，并且正确地缩小了屏幕。

希望这对任何人都有帮助，如果有人对其“优雅”发表评论，我们将不胜感激。

Answer 5

通常希望使用“ btn块”，以便按钮在其列中延伸（适用于在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>

Answer 6

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>

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

6 个答案: