レイアウトが計画どおりに動作していない

Question

私は社内ディレクトリのレイアウトを整理しようとしています。左側に従業員ピクチャを表示し、名前、説明、およびMoreInfoリンクを重ねて表示します。私は、ブートストラップ3

を使用してい

私がいる問題は、私が望むようMOREINFOリンクは画像の下にはなく、説明の下に表示されていることです。ここ

は、コード例です。このため

<div class="row"> 
    <div class="col-md-6"> 

     <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="pull-left"> 

     <div> 
     <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4> 
     <span> 
      Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
     </span> 
     <p> 
      <a href="#">Read Full Bio</a> 
     </p> 
     </div> 

    </div> 

    <div class="col-md-6"> 

     <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="pull-left"> 

     <div> 
     <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4> 
     <span> 
      Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
     </span> 
     <p> 
      <a href="#">Read Full Bio</a> 
     </p> 
     </div> 

    </div> 


    </div> 

任意の提案、または良好なレイアウトの例がはるかに理解されます。

Answer 1

<div class="col-md-6"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="img-responsive"> 
    </div> 
    <div class="col-sm-8"> 
     <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4> 
     <span> 
      Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
     </span> 
     <p> 
      <a href="#">Read Full Bio</a> 
     </p> 
    </div> 
    </div> 
</div> 

フローティング作るあなたの画像の周りのdivに追加のCOL呼び出しを使用してみてください。そうすれば、あなたのアイテムはコラムのように動作し、あなたのコンテンツはお互いに尊重されます。私はdivでcolコールから来るパディングを処理する追加の行ラッパーを追加しました。あなたの望みに合わせて内側の列の数字で遊んでみましょう。また、IMGコールにimg-responsiveを指定して、カラム上にブリードしないようにします。

Answer 2

は1つのdiv要素と名前に画像を入れて試してみて、MOREINFO別 で画像のdivが非

style="float:none;"