html - 显示照片的 Bootstrap 列

Question

我正在为初学者网站编写基本代码。我正在发布一些照片并想使用列来显示。

当我查看我的页面时，所有图片都在一条垂直线上。我如何让它们显示在整个页面的 3 列中。我似乎无法弄清楚我做错了什么。

这是我写的 HTML/CSS:

HTML:

<div class="supporting-4">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/My-Love.jpg" style="width: 256px; height: 256px;">
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Me-Hayley.jpg" style="width: 256px; height: 256px;">
        </div>
      </div>
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Me-Mom-Dad.jpg" style="width: 256px; height: 256px;">
        </div>
      </div>
    </div>
   <div class="row">
     <div class="col-md-4">
       <div class="thumbnail">
         <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Chris-Melissa.jpg" style="width: 256px; height: 256px;">
       </div>
     </div>
     <div class="col-md-4">
       <div class="thumbnail">
         <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Best-Friends.jpg" style="width: 256px; height: 256px;">
       </div>
     </div>
     <div class="col-md-4">
       <div class="thumbnail">
         <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Sugar.jpg" style="width: 256px; height: 256px;">
       </div>
     </div>
   </div>
  </div>
</div>

CSS:

.supporting-4 .thumbnail {
  display: inline-block;
}

Answer 1

您是否正在将 bootstrap.css 添加到您的元素中？ - 你需要链接 bootstrap.css，像这样:

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

另外，您可以在 img 中使用 img-responsive，这样您就可以让图像响应。

注意:不要在 img

中使用内联样式

<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-xs-4">
        <div class="thumbnail">
          <img class="img-responsive" src="//placehold.it/800" >
        </div>
      </div>
      <div class="col-xs-4">
        <div class="thumbnail">
          <img class="img-responsive" src="//placehold.it/800" >
        </div>
      </div>
      <div class="col-xs-4">
        <div class="thumbnail">
          <img class="img-responsive" src="//placehold.it/800" >
        </div>
      </div>
    </div>
   <div class="row">
     <div class="col-xs-4">
       <div class="thumbnail">
         <img class="img-responsive" src="//placehold.it/800">
       </div>
     </div>
     <div class="col-xs-4">
       <div class="thumbnail">
         <img class="img-responsive" src="//placehold.it/800" >
       </div>
     </div>
     <div class="col-xs-4">
       <div class="thumbnail">
         <img class="img-responsive" src="//placehold.it/800" >
       </div>
     </div>
   </div>
  </div>