为什么段落与面板标题重叠？

Question

当我尝试在<strong>{{ $result->username }}</strong>旁边添加HTML段落时，段落重叠到面板标题。当我没有添加段落时，这是输出。任何人都可以告诉我为什么我得到这个输出？

没有段落

带段落

我没有在我的代码中添加第I段的限制，只是测试输出。

查看

<div class = "col-md-8">

    <form class = "form-inline">

        <div class = "panel panel-default">

            <div class = "panel-body" style = "height: 500px">

                <div class = "row">

                    <div class = "col-xs-12">

                        <div class = "panel panel-default">

                            @foreach ($messageResult as $result)
                            <div class = "panel panel-heading-inbox" style = "height: 20px">

                                <span class = "glyphicon glyphicon-envelope"></span>

                                <strong>{{ $result->username }}</strong>

                                <div class = "btn-toolbar pull-right">

                                    <button type = "submit" class = "btn btn-default">Open</button>
                                    <button type = "submit" class = "btn btn-danger">Delete</button>

                                </div>

                            </div>
                            @endforeach 

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

Answer 1

您的btn-toolbar已pull-right。浮动项不会占用空间，除非父项有溢出：隐藏。 同时删除内联高度20px。

.panel-heading-inbox {
  line-height: 34px; /*vertically align adjust to your need or delete it*/
  overflow: hidden;
}