分隔div中的列以使文本向左對齊（引導程序）

Question

我想這很簡單，但是我無法理解！

屏幕快照中的“ Lorem Ipsum”主文本段落只想填充其所在方框的左半部分。當我嘗試在主div內放置一個div來做到這一點時，它會向左對齊，但方框不會t將文字向下擴展，使其“溢出”。

截圖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="caption-full">下添加一個<div class="row"> <div class="caption-full"> ，然后使用新的div分隔此新行的左側和右側。

解決我的問題的代碼示例（尚不完善）：

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