按钮并排且大小相同答案

【问题标题】：Buttons side by side and equal size按钮并排且大小相同
【发布时间】：2017-04-30 19:31:28
【问题描述】：

如何使用 Bootstrap 并排对齐两个按钮，我还想让它们大小相等，占宽度的 100%？没有 .btn-group 如何实现？

这是我目前所得到的：

<div class="div">
    <button type="button" id="btn-cancel" class="btn btn-lg btn-primary" type="submit">Cancel</button>
    <button type="button" id="btn-save" class="btn btn-lg btn-warning" type="submit">Save</button>
</div>

.div {
    display: inline-block;
    width:100%
}

【问题讨论】：

显示您的代码以展示您已经尝试过的内容。

标签： css twitter-bootstrap-3

【解决方案1】：

您可能需要查看引导文档，因为它清楚地显示了如何对齐按钮。 Bootstrap Buttons

基本上你需要的是与此类似的标记：

<div class="btn-group">
    <button type="button" class="btn btn-default">Action 1</button>
    <button type="button" class="btn btn-default">Action 2</button>
</div>

对于 100% 宽度，一半一半，您还需要一些额外的样式：

.btn-group {
    width: 100%;
}

.btn-group .btn {
    width: 50%;
}

【讨论】：

您必须将 div 分成 2 个相等的列。试试下面的代码。

【解决方案2】：

试试这个：

https://jsfiddle.net/7p9sgypm/

<div class="col-lg-6 col-xs-6 col-sm-6 col-md-6 div1">
  <input class="btn btn-success btn1">
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 div1">
 <input class="btn btn-warning btn1">
</div>

.btn1{
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.div1{
   padding:0;
  margin:0;
}

【讨论】：