ブートストラップサイト内のDivの右側に小さな白いスペース

ブートストラップサイトの行の右側に空白のビットが残っているという問題がありますが、すべてが完全に設定されているように見えます（0マージン、コンテナ流体など）。ブートストラップサイト内のDivの右側に小さな白いスペース

私は自分のサイトから要素を取り除き、問題の内容をできるだけ簡単に把握し始めました。私は今、頭の中身、容器の液体、そして一列になっていますが、それでも問題は解決しません。

html, body, .container-fluid { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.home { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("../images/background3.jpeg"); \t 
 
    padding-top: 10%; 
 
    padding-bottom: 10%; 
 
    background-size: cover; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Modern Business - Start Bootstrap Template</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row home"> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

以下picが、サイトがどのように見えるかです。白いスペースは非常にはっきりと見えます（右は5px程度の非常に小さい）。

出典

2016-12-20 Andrew Button

ブートストラップデフォルトのマージンをオーバーライドするために、あなたの.homeクラスに、margin:0を追加します。

https://jsfiddle.net/yc6p7osk/1/

あなたは.row調べる場合 - あなたはそこにいくつかのデフォルトの余白に気づくでしょう。

また、100％幅のコンテナに対して別のブーストラップクラスを使用することもできます。

出典

2016-12-20 01:20:13 sinisake

html, body, .container-fluid { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
} 

.home { 
width: 100%; 
height: 100%; 
padding-top: 10%; 
padding-bottom: 10%; 
background-size: cover; 
box-sizing: border-box; 
}

幅と高さを100％にすると、デフォルトでは罫線などが幅に追加されます。ボックスサイズの追加：border-box;あなたのブロックは100％になります。ここ

さらに詳しい情報：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

HTH。

出典

2016-12-20 01:24:22

PS：上記でテスト済み。隙間がない。 –

いいえ、この場合はボックスサイズでは動作しません：自分自身で見てください：https://jsfiddle.net/yc6p7osk/2/要素には2つのクラスがあります - デフォルトのブートストラップの.rowマージンを追加してください。 Btw、box-sizing：border-boxはブートストラップのデフォルトCSSの一部です。そのため、追加する必要はありません。 – sinisake

これはコードを修正しました... –

行クラスのデフォルトのマージンは、このよう.homeクラスでこの

編集をあなたのCSSを引き起こしている：任意の要素について

.home{ 
    width:100%; 
    margin:0; 
    padding:0; 
}

、常にmargin:0;padding:0;秒を置くことをお勧めしますそのCSSを書くことを始めます。マージンやパディングはいつでも後で追加できますが、このような問題は発生しません。

出典

2016-12-20 02:29:11 ab29007

ブートストラップサイト内のDivの右側に小さな白いスペース

答えて

関連する問題