ブートストラップ3不必要なパディングがコンテナ流体クラスの場合

ブートストラップに問題があります。私のサイトには常に左と右のパディングが追加されます。ブートストラップ3不必要なパディングがコンテナ流体クラスの場合

...</head> 
<body> 
<div class="container-fluid"> 
<div class="top"> 
PAGE CONTENT WITH MORE DIVS 
</div> 
</div>

または

...</head> 
<body> 
<div class="container-fluid"> 
<div class="row"> 
<div class="top"> 
PAGE CONTENT WITH MORE DIVS 
</div> 
</div> 
</div>

またはこの

...</head> 
<body> 
<div class="container-fluid"> 
<div class="row col-xs-12 col-md-12"> 
<div class="top"> 
PAGE CONTENT WITH MORE DIVS 
</div> 
</div> 
</div>

または

...</head> 
<body> 
<div class="container-fluid"> 
<div class="row col-xs-12 col-md-12"> 
<div class="row"> 
<div class="top"> 
PAGE CONTENT WITH MORE DIVS 
</div> 
</div> 
</div> 
</div>

のようなパディングappaerのようなもの：私は、 "コンテナ流体" は、この例を参照してくださいを使用しますいつも、チャンスはありません。

私の責任は何ですか？私はここのように、他のCSSを上書きしたくない：

Remove padding from columns in Bootstrap 3

出典

2016-12-21 Peronia

いいえ、それは問題を解決しません。 – Peronia

コンテナを取り除いても問題が解決しない場合は、別のコンテナがあります。 – bugfroggy

クラストップのCSS： '.top { 背景：＃000 url（bg_oben。jpg）no-repeat左上; 身長：60vh; background-size：cover; は} ' – Peronia

あなたが構造をたどる必要があります。

<body> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class=" col-xs-12 col-md-12"> 
     <div class="anyclass"> 
      PAGE CONTENT WITH MORE DIVS 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

はまた

html, body { 
    width: 100%; 
    margin: 0; 
}

体とhtmlのスタイルを定義しますギャップを避けるには、デフォルトで負のマージンを持つBSクラスrowを使用できます：

出典

2016-12-21 14:14:36 Banzay

は申し訳ありませんが、私は、これは私のために動作しません（身体とhtmlのスタイルを定義せずに）すでにこのソリューションを試してみました。 – Peronia

）が...コメントを投稿する入力します。私は上記の書いたようには今、私は新しいクラスを追加せずにソリューションをpreffer、 – Peronia

独自のクラスを定義できます（例：.remove-padding）。ブートストラップCSSを上書きします。

.remove-padding{ 
 
    padding: 0px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container-fluid remove-padding"> 
 
    <div class="top"> 
 
    PAGE CONTENT WITH MORE DIVS 
 
    </div> 
 
</div>

使用!importantに注意してください、私は私のCSSの後にstackoverflowのインポート外部CSSのコードスニペットために使用。ブートストラップスタイルの前にスタイルをインポートする場合は、!importantを使用してブートストラップCSSを上書きする必要はありません。

出典

2016-12-21 14:19:18

...身体とhtmlスタイルを定義して、それが動作しませんもう一度試してみました。ボトムストラップ自体で行う必要がありますか？パディングをリセットするだけで、新しいクラス – Peronia

ITSは、私はそれが私を助けていない、シンプルで透明な溶液 –

だと思います。私は黒のストライプが右と左ゴーンコード（パディング）を変更が、水平スクロールバーが表示されたら... – Peronia

私はこれを自分で解決しました。埋め込みは<div class="row col-xs-12 col-md-12">から行われます。ここで

完全なHTMLコード：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12 remove-padding"> 
      <header> 
      CONTENT 
      </header> 
     </div><!-- .col-md-12 --> 
    </div><!-- .row --> 
    BODY... 
</div><!-- .container-fluid -->

イムパディングを無効にするremove-paddingクラスを追加します。私のCSS：

.remove-padding{ 
padding: 0px !important; 
}

、デフォルトのブートストラップCSS：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
position: relative; 
min-height: 1px; 
padding-left: 15px; 
padding-right: 15px; 
}

なぜパディングと何がそれを削除し、ここで、ブートストラップ追加されますか？ Im worried ...

出典

2016-12-23 08:53:09 Peronia

ブートストラップ3不必要なパディングがコンテナ流体クラスの場合

答えて

関連する問題