ブートストラップレイアウト - あるレベルのアイコンを見出しと整列する

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を投稿していないので、正確に表示するのは難しいですが、マイナスのマージンを試してみてください。私はこのブートストラップにはこのためのクラスが組み込まれているのか分からないので、オフセットがウィンドウのサイズに応じて異なるので、ウィンドウサイズに基づいて正しい量のマージンを持つものを作る必要があるかもしれません。基本的には、オフセットに使用されているのとまったく同じ量のマージンが必要ですが、スパンでは負です。

<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

グリッドを分割し、第1グリッド上のアイコンを表示し、このコードを試してみてください：

<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>