css - 带有内容的 Bootstrap 列布局

Question

如何使用类似于下图的 Bootstrap 创建布局？在网络中，第一列表示它们的标签(开发人员、元素概述等)，随后的列是它们对不同元素的描述。在移动设备上必须与其内容垂直对齐。只需要一个使用 bootstrap 3 的启动代码，了解如何像在图像上一样制作布局，剩下的我会做。

这是我的示例代码，但在移动设备上查看时与我想要的不同。我想要一个像上图一样的设计。

<div class="row bg-highlight">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
        <h4>Project</h4>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <h4>BRIO TOWER</h4>
                <img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <h4>BRIO TOWER</h4>
                <img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <h4>BRIO TOWER</h4>
                <img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
            </div>
        </div>
    </div>
</div>

<div class="row bg-light-gray">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
        <h5>Developer</h5>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>DMCI Homes</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>SMDC</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>AVIDA LAND</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
        <h5>Project Overview</h5>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Answer 1

这是您应该使用的基本标记的良好开端。如果您需要左侧的这些标签与每个文本 block 对齐，则可能需要修改。

HTML

<div class="container">

  <div class="row">
    <div class="col-sm-12">
      <h1>Compare Property</h1>
      <hr>
      <p>Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>
    </div>
  </div>
  <div class="row with-images">
    <div class="col-sm-3 hidden-xs">
      <p class="descriptions">X</p>
      <p class="descriptions">Developer</p>
      <p class="descriptions">Overview</p>
      <p class="descriptions">Location</p>
    </div>
    <div class="col-sm-3">
      <div class="image-wrap">
        <img src="http://placehold.it/900x600">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
      <p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
    </div>
    <div class="col-sm-3">
      <div class="image-wrap">
        <img src="http://placehold.it/900x600">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
      <p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
    </div>
    <div class="col-sm-3">
      <div class="image-wrap">
        <img src="http://placehold.it/900x600">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
      <p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
    </div>
  </div>

</div><!-- /.container -->

CSS

.with-images img {
    max-width:100%;
    height:auto;
}
.image-wrap {
    margin-bottom:15px;
}

Example on Bootply