Question

How can I align two buttons side by side using Bootstrap, also I would like to make them both equally sized, taking together 100% of width? How achieve that without .btn-group?

This is what I've got so far:

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

Answer 1

试试这个：

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

Answer 2

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

基本上你需要的是一个simillar标记：

<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%;
}

Buttons side by side and equal size

2 个答案: