使用引导区时左右图像的左右空格

我有3行图像。
图像左侧有白色空间。
右侧图像右侧有空白区域。使用引导区时左右图像的左右空格

我该如何解决这个问题，所以我没有任何左右侧的空间？

见下面我的代码：

背景是橙色的图像所以最好可见。

HTML：

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 featured"> 

     <div class="col-md-4 img-featured-1"> 
     <%= image_tag("featured-1.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <%= image_tag("featured-2.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <%= image_tag("featured-3.jpeg", class: "img-responsive") %> 
     </div> 

    </div> 
    </div> 
</div>

CSS：

.featured { 
    background-color: orange; 
} 
.img-featured-1 { 
    width: 33.33333%; 
    float: left; 
} 
.img-featured-2 { 
    width: 33.33333%; 
} 
.img-featured-3 { 
    width: 33.33333%; 
    float: right; 
}

See the image

来源

2016-06-18 breakslow_

另外，大多数CSS是不neccesary。尽管引导程序类“.col-md-4”已经设置了它，但您将宽度宣布为33.3333％。而且浮动也不是必需的，它们应该一个接一个地定位。 – torus

为什么你使用'col-md-offset-1 col-md-10'类来'精选'。它也减少了空间。相反尝试'col-md-12' – DJAy

这可能是因为.row类增加对双方一定的余量。

试试这个：

.row { 
    margin: 0; 
}

来源

2016-06-18 18:14:07 torus

两件事情，第一件事情就是你的样式表。它应该是.img-featured-1（点定义这种风格适用于给定名称的类）。

接下来，如果没有解决，请检查您的主题样式表，或覆盖边距和填充{margin：0！important;填充：0！重要; }

最后，请确保您的图片本身没有白色/透明空间。

来源

2016-06-18 18:17:10

试试这个：

.featured { 
    background-color: orange; 
} 

.nopadding { 
    padding:15px 0px;}

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 nopadding"> 

     <div class="col-md-4 img-featured-1"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 

    </div> 
    </div> 
</div>

来源

2016-06-19 03:13:36 Jamdev

使用引导区时左右图像的左右空格

回答

相关问题