我如何放置一個進度條和按鈕與引導程序對齊

Question

我試過不同的選項，但我似乎無法排列這些。有任何想法嗎？

<div class="row"> 
<div class="col-md-6"> 
    <div class="row"> 
     <div class="progress"> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="55%" aria-valuemin="0" aria-valuemax="100" style="width:55%"> 
       55%<span class="sr-only">55% Complete</span> 
      </div> 

     </div> 
     <button style="margin-left: 20px; float:right;" type="button" class="btn-sm btn-danger">DANGER</button> 

    </div> 
</div> 
    <div class="col-md-6">.col-md-4</div> 
</div> 

Answer 1

對於您的代碼，只需將col-md-10添加到進度條。但我不建議你現在的結構。不需要創建嵌套行。

<div class="row"> 
    <div class="col-md-6"> 
    <div class="row"> 
     <div class="progress col-md-10"> 
     <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="55%" aria-valuemin="0" aria-valuemax="100" style="width:55%"> 
      55%<span class="sr-only">55% Complete</span> 
     </div> 

     </div> 
     <button style="margin-left: 20px; float:right;" type="button" class="btn-sm btn-danger">DANGER</button> 

    </div> 
    </div> 
    <div class="col-md-6">.col-md-4</div> 
</div> 

輸出：

CodePly

Answer 2

不知道你是怎麼想排隊起來，但我覺得這是更你想要什麼

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-8"> 
       PROGRESS BAR GOES HERE 
      </div> 
      <div class="col-sm-4"> 
       BUTTON GOES HERE 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     NOT SURE WHY YOU HAVE COL-MD-4 HERE BUT IF YOU WANT THAT DISPLAYED IT GOES HERE 
    </div>