Question

如何删除此空格 - ＆gt;

我想让底部的两张图像像右边那样向上移动。

我想我不应该使用col-md- *但仍然不明白。

＆＃13;

.portfolio {

}

.portfolio h4 {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Lora', serif;
  margin-bottom: 20px;
}

.portfolio-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
  <h4>Portfolio</h4>
  <div class="row">
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">Wongilang.xyz</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">Wongilang.xyz</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
    </div>
    <div class="col-md-4 portfolio-item">
      <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
      <h3><a href="#">Intanrahmadhani.web.id</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
    </div>
  </div>
</div>
</div>
</div>

＆＃13;

Answer 1

您的图像似乎有不同的高度，因此您可以看到第一张图像下方的空白区域和第二张图像不相同，最后2张图像出现在第4张图像后面（intanrahmadhani.web.id）

您可以调整/裁剪这些图像以确保高度一致或对图像容器应用固定高度。

＆＃13;

.portfolio h4 {
  font-size: 28px;
  font-weight: 600;
  font-family: 'Lora', serif;
  margin-bottom: 20px;
}

.portfolio-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
  display: block;
  height: 300px;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="portfolio">
      <h4>Portfolio</h4>
      <div class="row">
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x650" alt=""></a>
          <h3><a href="#">Wongilang.xyz</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x450" alt=""></a>
          <h3><a href="#">Intanrahmadhani.web.id</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x250" alt=""></a>
          <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x550" alt=""></a>
          <h3><a href="#">Intanrahmadhani.web.id</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x350" alt=""></a>
          <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
          <p>...</p>
        </div>
        <div class="col-md-4 portfolio-item">
          <a href="#"><img class="img-responsive" src="http://placehold.it/450x750" alt=""></a>
          <h3><a href="#">Wongilang.xyz</a></h3>
          <p>...</p>
        </div>
      </div>
    </div>

＆＃13;

如何删除css

1 个答案: