如何讓這些按鈕以一定的垂直間距浮動右和垂直對齊

Question

以下是我的代碼。

帶有當前代碼的按鈕顯示在底部，而我希望它們以垂直方式顯示在最右邊的位置。下面是我的代碼

<div class= "container-fluid"> 
    <div class = "row"> 
     <div class = "col-sm-2"> 
     </div> 

     <div class = "col-sm-8"> 
      <div name="visList"> 
       <div name="dispTestList"> 
        <div class = "panel" > 
         <div class="panel-body"> 
          <div class="row"> 
           <div name="col-sm-2"><h4>ABC HEADING</h4> 
           </div> 
           <div name="col-sm-4"> 
            Desc1 : <span>Random Desc</span> | Desc 2 : 
            <span>Some Random</span> | Desc3 : <span>Random Desc</span> | Desc 4 : 
            <span>Some Random</span> 
           </div> 
           <div name="buttonSection" class="col-sm-6"> 
            <div class="pull-right"> 
             <a class = "btn btn-success" style="margin-top: 1%;">Take Test</a> 
             <a class="btn btn-success">View Result</a> 
             <a class="btn btn-success">View Answers</a> 
            </div> 
           </div> 
          </div> <!-- Row --> 
         </div> <!-- Panel Body --> 
        </div> <!-- Panel --> 

       </div> 
      </div> <!-- visible the section --> 
     </div> <!-- col-sm-8 --> 

     <div class = "col-sm-2"> 
     </div> 

    </div> <!-- Row --> 
</div> <!-- container fluid --> 

JS的小提琴就是這個http://jsfiddle.net/DashmeetSingh/k6EUK/

我想要得到的顯示像下面的網頁按鈕。

http://www.starsports.com/cricket/tour/tourid=160/schedule/index.html

Answer 1

結合你的按鈕在右側，請嘗試：div.pull-right { float: right; }。如果您希望它們垂直堆疊，也可以將按鈕放入列表中。

<div class="pull-right"> 
    <ul class="buttons"> 
     <li><a class = "btn btn-success" style="margin-top: 1%;">Take Test</a></li> 
     <li><a class="btn btn-success">View Result</a></li> 
     <li><a class="btn btn-success">View Answers</a></li> 
    </ul> 
</div> 

（要取出要點，你可以使用列表式速記CSS是這樣的：ul.buttons { list-style: none }）