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-responsive中使用img，这样您就可以对图片做出响应。

注意：请勿在{{1}}

中使用内嵌式

＆＃13;

img

＆＃13;

Bootstrap列显示照片

1 个答案: