引導佈局 - 對齊圖標在一個水平上與標題

Question

我需要使用引導創建佈局，但我正在努力調整圖標（如它在圖像上看到的那樣）。它應該沒有左邊距，與文章標題的水平相同。我嘗試了不同的容器分別爲圖標和其他內容，但它沒有解決。

代碼，因爲它現在是：

<div class="container"> 
     <span id="article"><span class="glyphicon glyphicon-list-alt"></span></span> 
     <div class="col-xs-offset-1"> 
     <h2>Article title</h2> 
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p> 
     <button id="button" class="btn btn-lg">Sign Up</button> 
     </div></div> 

layout image 我怎樣才能使這項工作？

Answer 1

由於您尚未發佈CSS，因此很難正確顯示，但請嘗試使用負邊距。我不知道bootstrap有一個內置的類，所以您可能需要根據窗口大小製作一個具有正確的不同數量邊距的偏移量，因爲偏移量會根據窗口大小而有所不同。基本上你需要與在偏移中使用的完全相同的邊際量，但是在跨度上爲負值。

<div class="container"> 
    <div class="col-xs-offset-1"> 
    <h2><span id="article" style="margin-left:-20px"><span class="glyphicon glyphicon-list-alt"></span></span> Article title</h2> 
     <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p> 
    <button id="button" class="btn btn-lg">Sign Up</button> 
    </div></div> 

Answer 2

嘗試這個代碼，劃分網格，並顯示在第一格的圖標：

<div class="container"> 
    <div class="col-md-2"> 
    <h3><i class="glyphicon glyphicon-list-alt"></i></h3> 
    </div> 
    <div class="col-xs-10"> 
    <h2>Article title</h2> 
     <p>Paragraph</p> 
    <button id="button" class="btn btn-lg">Sign Up</button> 
    </div> 
</div>