html - 覆盖前一个 div 的 Bootstrap 面板

Question

我有一个代码，我想在其中添加 2 个按钮，然后按钮下面应该是一个带有选项的 Bootstrap 面板。

<div ng-controller="stdFormCtrl">

  <div class="col-xs-12">
    <span class="col-xs-6 text-center">
      <a href="#" class="btn btn-default">Add</a>
    </span>
    <span class="col-xs-6 text-center">
      <a href="#" class="btn btn-default ">Preview</a>
    </span>
  </div>


  <div class="panel panel-default ">
    <div class="panel-heading">
      <h3 class="panel-title">Options</h3>
    </div>
    <div class="panel-body">
      <select class="form-control" 
          ng-model="itemData.itemType" 
          ng-click="lstComponentSelected( )">
          [CODE CONTINUES]

我遇到的问题是，我不明白为什么，面板标题会拉伸(stretch)并包含按钮，所以看起来 Ädd"和 "Preview"按钮是标题的一部分

您能帮我理解为什么会这样吗，以及如何按照我的需要将按钮与面板标题分开？

建议的 fiddle 链接:http://jsfiddle.net/GabrielBarcia/842hjam1/

提前致谢!

Answer 1

将 col-xs-12 更改为一行。

例如

<div class="row">
  <div class="col-xs-6 text-center">
    <a href="#" class="btn btn-default">Add</a>
  </div>
  <div class="col-xs-6 text-center">
    <a href="#" class="btn btn-default ">Preview</a>
  </div>
</div>

编辑:bootstrap float 列，因此如果它们不包含在一行中，您将获得您遇到的行为。