Question

我无法解决问题，请帮忙。我使用自举网格做自适应站点，无法在一行中找到四个图像。图像应该靠近，没有任何间隔和间距。我有我的代码：

 <div class="main_boxes">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="one">
                        <img src="img/one.png" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="two">
                        <img src="img/two.png" />
                    </div>    
                </div>
                <div class="col-md-3">
                    <div class="three">
                        <img src="img/three.png" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="four">
                        <img src="img/four.png" />
                    </div>
                </div>                
            </div>
        </div>
    </div>

图片为295x150，浏览器间隔为

Answer 1

将类img-responsive添加到每个<img>标记中，如下所示：

<div class="main_boxes">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="one">
                    <img class="img-responsive" src="img/one.png" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="two">
                    <img class="img-responsive" src="img/two.png" />
                </div>    
            </div>
            <div class="col-md-3">
                <div class="three">
                    <img class="img-responsive" src="img/three.png" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="four">
                    <img class="img-responsive" src="img/four.png" />
                </div>
            </div>                
        </div>
    </div>
</div>

Answer 2

假设您的图片是200px wide和200px high。你可以试试像

这样的东西

<div class="container">
  <div class="row">
  </div>
  <div class="col-md-3">
    <image src="image1.jpg"></img>
  </div>
  <div class="col-md-3">
    <image src="image2.jpg"></img>
  </div>
  <div class="col-md-3">
    <image src="image3.jpg"></img>
  </div>
  <div class="col-md-3">
    <image src="image4.jpg"></img>
  </div>
</div>

bootstrap grid是12列宽。这意味着列必须加起来为12.您可以通过制作四个div，每列三列来完成此操作。完成后它看起来像这样

Image 1             Image 2             Image 3            Image 4

希望这有帮助。

Answer 3

我做了一个没有边距/填充的小提琴：

http://jsfiddle.net/Le6oosvo/2/

enter image description here

我使用了这个HTML：

<div class="main_boxes">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3">
                    <div class="one">
                        <img class="img-responsive" src="http://lorempixel.com/295/150" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="two">
                        <img class="img-responsive" src="http://lorempixel.com/295/150" />
                    </div>    
                </div>
                <div class="col-sm-3">
                    <div class="three">
                        <img class="img-responsive" src="http://lorempixel.com/295/150" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="four">
                        <img class="img-responsive" src="http://lorempixel.com/295/150" />
                    </div>
                </div>                
            </div>
        </div>
    </div>

这一点CSS：

.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}

我使用.col-sm-3而不是.com-md-3来使图像在彼此的一侧对齐更长时间（当你将其向下挤压时）。我还添加了bootstrap类来使图像响应。

Bootstrap网格图像定位

3 个答案: