Question

这是我的代码，我无法理解为什么我的图像不会排列。

最后一张图片在其上方留下了相当大的空间。帮我制作一些艺术品的画廊。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<section class="col-sm-12  col-md-6 col-lg-6">
  <a href="#">
    <div class="thumbnail"> <img src="images/Celeb. Portraits Tom    Waits, Tupac, Notorious BIG_2.jpg" alt="celeb" /></div>
  </a>
</section>
<section class="  col-sm-12  col-md-6 col-lg-6">
  <a href="#">
    <div class="thumbnail"><img src="images/music_2.jpg"="guitar" /></div>
  </a>
</section>
<section class="col-sm-12 col-md-6 col-lg-6">
  <a href="#">
    <div class="thumbnail"> <img src="images/big man    house.jpg" alt="celeb" /></div>
  </a>
</section>
<section class="col-sm-12 col-md-6 col-lg-6 clear">
  <a href="#">
    <div class="thumbnail"> <img src="images/elephant_2.jpg" alt="elephant" /></div>
  </a>
</section>

Answer 1

这是因为顶部两个图像上的项目高度不同而发生这种情况。要让它们显示在整齐的行中，请将每组两个放在div中，并使用类row。

<div class="row">
  <section class="col-sm-12 col-md-6 col-lg-6">
   ...
  </section>
  <section class="col-sm-12 col-md-6 col-lg-6">
   ...
  </section>
</div>

<div class="row">
  <section class="col-sm-12 col-md-6 col-lg-6">
   ...
  </section>
  <section class="col-sm-12 col-md-6 col-lg-6">
   ...
  </section>
</div>

图像在引导程序中不对齐

1 个答案: