web-dev-qa-db-ja.com

ブートストラップ：外部マージンのない流動的なレイアウト

私が持っている場合：

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span8">
             Some Element....
       </div>
       <div class="span4">
             Other Element
       </div>   
   </div>       
</div>

このコードでは、左と右のウィンドウの境界からマージンがあります。これらのマージンをどのように排除できますか？

ご協力ありがとうございました

layouttwitter-bootstrapmarginfluid-layout
24
Tom

私はあなたの質問を正しく理解しているなら、あなたはこれが欲しいと信じています：

.container-fluid {
    padding: 0px;
}

また、レスポンシブbootstrap=を使用している場合、これも必要になります。

@media (max-width: 797px) {
    body { 
        padding-left: 0px;
        padding-right: 0px;
    }
}

編集：ここは jsフィドル です。

32
hajpoj

表示される効果は、containerのパディングが原因です。

containerのデフォルトのパディングは、組み込みの Bootstrap 4スペースユーティリティクラス で変更できます。

パディングを削除するには、containerに_p-0_を追加します。

_<div class="container-fluid p-0">
    <div class="row">
      <div class="col-8">
         Some Element....
       </div>
       <div class="col-4">
          Other Element
       </div>   
    </div>       
</div>_

組み込みのユーティリティクラスを使用すると、CSSを無駄にしないという利点があり、デフォルトの_container-fluid_クラス定義も変更されません。

2
AndreasPizsa