イメージがブートストラップ列の完全なスペースを占めるようにしたい

レイアウトを作成しようとしていますが、2列に行を分割し、列の完全なスペースを占める2列目。私はこれが反応的なやり方で働くことを望みます。イメージがブートストラップ列の完全なスペースを占めるようにしたい

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 content"> 
       <div class="row"> 
        <div class="col-md-6"> 
       <img src="http://placehold.it/250X250"> 
       </div> 
       <div class="col-md-6 title"> 
        <h3>first title here</h3> 
        <h2>Sub-title goes here</h2> 
       </div> 
       </div> 
      <div class="row"> 
       <ul class="col-md-12 main-list"> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
       </ul> 
       <div class="small-images"> 
       <img class="small-image1" src="http://placehold.it/200x100"> 
       <img class="small-image2" src="http://placehold.it/200x100"> 
       </div> 
      </div> 
      </div> 

      <div class="col-md-6 featured-image"> 
       <img src="http://placehold.it/300X300"> 
      </div> 
     </div>

出典

2017-02-05 nsd

あなたはあなたのレイアウトは結構ですそれ以外の場合は、より少ないスペースを取っている理由であること300*300ある画像を使用しています。私は下のスニペットでうまくいっている全幅の画像を提供しました。
レイアウトを応答性にするには、<div>sに異なるクラスを追加します。 col-md-6 col-sm-6 col-xs-6 col-lg-6。また、画像を反応させるためにclass="img-responsive"をあなたのimgタグに追加してください。この応答のための

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
      <body> 
 
      <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content"> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
 
       <img src="http://placehold.it/250X250" class="img-responsive"> 
 
       </div> 
 
       <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 title"> 
 
        <h3>first title here</h3> 
 
        <h2>Sub-title goes here</h2> 
 
       </div> 
 
       </div> 
 
      <div class="row"> 
 
       <ul class="col-md-12 col-sm-12 col-xs-12 col-lg-12 main-list"> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
       </ul> 
 
       <div class="small-images"> 
 
       <img class="small-image1" src="http://placehold.it/200x100" class="img-responsive"> 
 
       <img class="small-image2" src="http://placehold.it/200x100" class="img-responsive"> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 featured-image "> 
 
       <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" class="img-responsive"> 
 
      </div> 
 
     </div> 
 
     </body> 
 
    </html>

出典

2017-02-05 08:53:14 neophyte

感謝。しかし、小さなデバイスの場合、これは機能しません。私は、コンテンツの画像とタイトルを互いに隣接させ、特集した画像を隠しておきたい。また、主要なリストは完全な12の列に広がっていません。私は特色のあるイメージのために隠されたsmを使用したが、私は何とかその場所はまだ占有されていると思うし、他の要素はそこに適合していない – nsd

イメージがブートストラップ列の完全なスペースを占めるようにしたい

答えて

関連する問題