разделение столбцов в div для выравнивания текста слева (bootstrap)

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 в правой половине поля.

Вся помощь очень полезна. Счастлив купить кому-то кофе, который может помочь.

Answer 1

Итак, я понял это, мне нужно было добавить <div class="row"> под <div class="caption-full">, а затем использовать новые divs для разделения слева и справа от этой новой строки.

Пример кода, фиксированный мой вопрос (его не в чистом виде еще):

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