Facebook风格的朋友侧边栏引导程序

Question

<div class="sidebar-nav-fixed">
   <div class="row">
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
      <div>
         <a href="#" class="thumbnail">
         <img src="images/geeks-thumbnail.jpeg">
         </a>
      </div>
   </div>
</div>

我想在侧边栏内的每一行显示这些配置文件缩略图3。我正在使用缩略图类，但这些都在每行上都有1张图像。

请帮助。

由于

Answer 1

尝试像这样修复

<div class="sidebar-nav-fixed">
<div class="row">
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>
  <div class="col-md-4">
     <a href="#" class="thumbnail">
     <img src="images/geeks-thumbnail.jpeg">
     </a>
  </div>

Answer 2

row中的项目数由col-类（Grid system docs）确定

每行三个项目，您将使用col-**-4：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="sidebar-nav-fixed">
   <div class="row">
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
         <img src="http://placehold.it/150x150">
         </a>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;