Bootstrap 网格图片定位

Question

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

 <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

假设您的图像是 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，每个 div 每三列。完成后看起来像这样

Image 1             Image 2             Image 3            Image 4

希望对您有所帮助。

Answer 2

将 class 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 3

我做了一个没有边距/填充的 fiddle 像这样：

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

我用过这个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 class 以使图像响应。

Bootstrap 网格图片定位

Bootstrap grid images positioning

html

css

twitter-bootstrap