ブートストラップのフロートdivs

Question

どのように結果を得ることができますか、あなたは写真で見ることができますか？私はcol-md-4 divs、私はお互いの隣に2つのdivが必要です。左側のikon、ikonの隣のテキスト。

私はどんなカスタムCSSでも試してみました： このコードは、to divがお互いの下にあり、フローティングではありません。

echo '<div class="col-md-4 elony"> 
        <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div> 
        <div class="pull-right"> 
         <span class="elony_nev">'.$elony['elony_nev'].'</span> 
         <p class="elony_text">'.$elony['elony_text'].'</p> 
        </div> 
        <div class="clearfix"></div> 
       </div>'; 

enter image description here

Answer 1

2つのdiv要素が隣同士にとどまるuはのように、クラスの行で新しいdiv要素を開始することができようにするには：

echo '<div class="col-md-4 elony"> 
      <div class = "row"> 
       <div class = "col-md-6"> 
        '.$elony['elony_ikon'].' 
       </div> 
       <div class = "col-md-6"> 
        '.$elony['elony_text'].' 
       </div> 
      </div>'; 

Answer 2

あなたは周囲のrowクラスを追加する必要がありますあなたがお互いに必要とする2つのアイテム。この場合、あなたは次のようになります：

<div class="col-md-4 elony"> 
    <div class="row"> <!-- add the row here --> 
     <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div> 
     <div class="pull-right"> 
      <span class="elony_nev">'.$elony['elony_nev'].'</span> 
      <p class="elony_text">'.$elony['elony_text'].'</p> 
     </div> 
     <div class="clearfix"></div> 
    </div> <!-- close the row here --> 
</div> 

Answer 3

ブートストラップでこれを行うことができます。あなたがする必要があるのは.col-*要素を他の.col-*要素に入れ子にすることです。したがって、他の2つの要素の隣にある要素の内側に、隣り合う2つの要素を追加することができます。

ヒント：：私は基本的なcolumn-nestingコード例を作成し、必ず.row要素内の列をラップする、これはラッピングエラーを防止し、列の外側の側溝を削除します。

.box { 
 
    border: 1px solid #333; 
 
} 
 

 
.icon{ 
 
    width: 100%; 
 
    height: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>