Question

我用bootstrap中的缩略图类创建了带顶部标题的图像galery，如下所示：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
          <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
          <a href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style="">
          <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
          <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
          <a href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style="">
          <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
    <div class="col-md-12">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
          <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
          <a href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style="">
          <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

但问题是这里有一点右，左，下差距：

我希望缩略图cotainer边框适合图像大小，有没有办法做到这一点？

Answer 1

更新自定义样式

<强> Fiddle Demo

.thumbnail
{
  padding: 0px !important;
}

代码段示例

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
.thumbnail
{
  padding: 0px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
            <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
            <a  href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="/w3images/lights.jpg" target="_blank" style="">
          <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
            <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
            <a  href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="/w3images/lights.jpg" target="_blank" style="">
          <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
    <div class="col-md-12">
      <div class="thumbnail">
        <div class="caption" style="margin-bottom:15px;">
            <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
            <a  href="google.com" target="_blank" style=""> View more </a>
        </div>
        <a href="/w3images/lights.jpg" target="_blank" style="">
          <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%">
        </a>
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个：

.col-md-6 {
    margin: 0;
}

或

.col-md-6 {
    padding: 0;
}

Answer 3

我认为你应该在行中添加填充标记。那么它有容器的空白空间

.row {
    padding: 0;
}

<div class="row">

Answer 4

存在差距的原因是缩略图类具有填充。要解决此问题，您必须将其删除...

.thumbnail{
    padding: 0px !important;
}

Bootstrap图像缩略图容器没有间隙

4 个答案: