在容器內拉一個圖像

Question

我有一個標誌，我想將它放在第一行的容器右側。首先我寫了這樣的代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <img src="../Images/logo.png" alt="Logo"/> 
     </div> 
     <div class="col-md-9"> 
     </div> 
    </div> 
</div>  

和標誌IS顯示在第一行的左側並留有一些餘量。現在，我想補充pull-right類我div這樣的：

<div class="col-md-3 pull-right"> 
    <img src="../Images/logo.png" alt="Logo"/> 
</div> 

和徽標對齊到瀏覽器窗口的右側，無任何空白。我如何將徽標放置在第一排的右側，如左側？

感謝

Answer 1

如果您想將圖像拉你需要拉圖像的權利，而不是該行：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <img src="../Images/logo.png" alt="Logo" class="pull-right"/> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      Column 2 
 
     </div> 
 
    </div> 
 
</div>

如果你想在列切換地點而不改變<div>的順序，您應該使用.col-*-pull-* and .col-*-push-*。他們會尊重列水槽：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-push-6"> 
 
      <img src="../Images/logo.png" alt="Logo"/> 
 
     </div> 
 
     <div class="col-xs-6 col-xs-pull-6"> 
 
      Column 2 
 
     </div> 
 
    </div> 
 
</div>

當然你可以將二者結合起來爲好。 （順便說一下，不要在最終設計中將alt-text設置爲「Logo」，將其設置爲有用的東西，比如公司名稱）。