Bootstrap面板覆蓋以前的div

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] 

我遇到的問題，我不明白爲什麼，就是在面板標題舒展，包括按鍵，所以它似乎像add「和‘預覽’按鈕是頭部的一部分，而不是

能否請你幫我明白爲什麼發生這種情況，以及如何按鈕可以從面板頭分開，因爲我需要做的

小提琴鏈接的建議：？！提前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> 

編輯：引導漂浮列，所以如果他們不包含在一行內，你會得到你遇到的行爲。