使用引導區時左右圖像的左右空格

我有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

使用引導區時左右圖像的左右空格

回答

相關問題