Question

我有一个代码，我想添加2个按钮，然后按钮应该是带有选项的引导面板。

<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]

我遇到的问题，我不明白为什么，面板标题拉伸并包含按钮，所以看起来像Ädd“和”预览“按钮是标题的一部分

你能帮我理解为什么会发生这种情况，以及按钮如何与面板标题分开，我需要做什么？

建议的小提琴链接：http://jsfiddle.net/GabrielBarcia/842hjam1/

提前致谢！

Answer 1

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

E.g。

<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浮动列，所以如果它们不包含在一行中，您将获得您所经历的行为。

Bootstrap面板覆盖前一个div

1 个答案: