html - 分隔 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"> 下方然后使用新的 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>