面板标题无法正确显示

Question

我是twitter bootstrap的新手，我正在尝试在面板中设置一个面板。

第一个外面板很好，但是我的内面板 - 标题似乎切掉了边缘。以下是正在发生的事情的屏幕截图：

这是我尝试使用的代码：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4>@String.Format("{0} {1} - {2}", Model.Institution, Model.Description, Model.AccountType)</h4>
    </div>
    <div class="panel-body">
        <br />
        <div class="col-md-4 panel panel-default">
            <div class="panel-heading">
                <h3>Account Details</h3>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="">
                        <small>
                            @Html.LabelFor(x => x.Institution)</small>
                        <br />@Model.Institution<br />
                    </div>
                </div>

你能明白为什么我会失去优势吗？

Answer 1

您必须使用.col-md-4包裹Panel，并将其放在.row

中

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">


    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
      </div>
    </div>


  </div>
</div>