Question

如何删除图像之间的间距？我希望图像并排。现在我有了这个：

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

<div class="container">
<div class="row">
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
<div class="col-lg-1">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 1

Bootstrap在col-lg-1类的任一侧添加了15px的填充。

<div class="col-lg-1" style="padding: 0">
  <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
</div>

如果您不希望它们在较小屏幕上的单独行上添加如下所示的类：

 <div class="col-lg-1 col-sm-1 col-md-1" style="padding: 0">
      <img src="http://meadowcreeksausage.com/wp-content/uploads/2015/02/Italian-Sausage-meadow-creek-150x150.jpg" class="img-responsive">
    </div>

Answer 2

您可以覆盖col-lg-1的预设间距（填充）。只需将style="padding: 0"添加到同一div。

即可

图像之间的引导间距

2 个答案: