Question

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2">
              <h2><span class="label label-primary" id="notify">Notifications</span><h2>
        </div>
        <div class="col-sm-9 col-md-10">
            <!-- Split button -->
            <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
                &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button>
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default">
                    Mark all as read
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">
                    Delete
                </button>
            </div>
        </div>
    </div>
    <hr>
</div>

这是小提琴。

https://jsfiddle.net/SimplytheVinay/0g8fm8u6/

我尝试了多个类的组合。即使手动设置Label的高度也不起作用。不知何故，标签占据的高度超过其大小。尝试设置边距。没运气。

对网络开发很新，所以纠正我如果我遗漏了什么。

Answer 1

您也可以为按钮https://jsfiddle.net/7n0t19hr/

设置H2

  <div class="col-sm-9 col-md-10">
       <h2>


        <!-- Split button -->
        <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
            &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button>
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default">
                Mark all as read
            </button>
        </div>
  <div class="btn-group">
            <button type="button" class="btn btn-default">
                Delete
            </button>
        </div>           
    </h2>
    </div>
</div>
<hr>
</div>

Answer 2

问题是你没有关闭h2标签。

<h2><span class="label label-primary" id="notify">Notifications</span><h2>

请参阅。解决这个问题，你就可以操纵高度和填充等等。

BootStrap：连续两个Div未正确对齐

2 个答案: