帶內容的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

這是您應該使用的基本標記的良好開端。如果您需要將左側的標籤與每個文本塊對齊，則可能需要修改。

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