divの列をテキストの左揃えに分割する（ブートストラップ）

Question

これは簡単だと思っていますが、私は頭を丸くしません！

スクリーンショットのメインの「Lorem Ipsum」テキスト段落は、それが入っているボックスの左半分を塗りつぶしたいだけです。これを行うにはメインのdiv内にdivを置いてください。テキストが下に向かって拡大しないので、「オーバースピル」になります。

http://i772.photobucket.com/albums/yy4/philbuckthorpe/Screen%20Shot%202016-09-26%20at%2020.51.00_zpshcjcm6qh.png

.thumbnail { 
 
    padding: 0; 
 
} 
 

 
.thumbnail .caption-full { 
 
    padding: 9px; 
 
    color: #333; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col-md-3"> 
 
       <p class="lead">Our Artists</p> 
 
       <div class="list-group"> 
 
        <a href="#" class="list-group-item active">Artist 1</a> 
 
        <a href="#" class="list-group-item">Artist 2</a> 
 
        <a href="#" class="list-group-item">Artist 3</a> 
 
       </div> 
 
      </div> 
 

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

 
       <div class="thumbnail"> 
 
        <img class="img-responsive" src="http://placehold.it/800x300" alt=""> 
 
        <div class="caption-full"> 
 
         <h4><a href="#">Artist 1</a> 
 
         </h4> 
 
         <p>Want to know when "Artist 1" will next be performing live? CLick this link <a target="_blank" href="#">website here</a>.</p> 
 
         <p><strong>About "Artist 1"</strong></p> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
    </div>

問題だけ広いディスプレイではなく、携帯サイズのディスプレイで見ることができるスクリーンショット。文脈に入れるためには、メイン段落にボックスの左半分を入れたいので、ボックスの右半分にSpotifyプレイリストを埋め込むことができます。

すべてのヘルプは多くのappriciatedです。誰かを助けることができるコーヒーを買って幸せ。

Answer 1

私は<div class="row">を<div class="caption-full">の下に追加し、この新しい行の左右を区切るために新しいdivを使用する必要がありました。あなたはどの意志が*ない*ヘルプあなたを使用している `CSS`を供給していない

.thumbnail { 
 
    padding: 0; 
 
} 
 
.thumbnail .caption-full { 
 
    padding: 9px; 
 
    color: #333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-md-3"> 
 
     <p class="lead">Our Artists</p> 
 
     <div class="list-group"> 
 
     <a href="#" class="list-group-item active">Artist 1</a> 
 
     <a href="#" class="list-group-item">Artist 2</a> 
 
     <a href="#" class="list-group-item">Artist 3</a> 
 
     </div> 
 
    </div> 
 

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

 
     <div class="thumbnail"> 
 
     <img class="img-responsive" src="http://placehold.it/800x300" alt=""> 
 
     <div class="caption-full"> 
 
      <div class="row"> 
 

 
    <div class="col-md-7"> 
 
      <h4><a href="#">Artist 1</a> 
 
         </h4> 
 
      <p>Want to know when "Artist 1" will next be performing live? CLick this link <a target="_blank" href="#">website here</a>.</p> 
 
      <p><strong>About "Artist 1"</strong> 
 
      </p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
      </div> 
 
     <div class="col-md-5"> 
 
     <p>irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
     </div> 
 
     
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>