Bootstrap3では、なぜこのマージンが存在するのですか？

divのcol--をdiv col--に作成します。Bootstrap3では、なぜこのマージンが存在するのですか？

はここに私のコード

<body style="overflow-y:scroll;"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: darkgray; height: 50px;"> 
      <p style="word-break: break-all"><h6></h6></p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: transparent; height: auto;"> 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #003366; height: 40px;"> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #447e9b; height: 40px;"> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #ba2121; height: 40px;"> 
      </div> 
     </div> 
    </div> 
</div> 
</body>

だそれはこの

どのように私はそのマージンを削除することができますように余裕を持って？

私はそれがなぜ3列col--4 col- -8であり、8が等しく3に分割されていないのかと考えました。

だから私はcol--3をcol- -8に変更しました。しかし、同じ結果が出ました。

このマージンはどこから来ていますか？

どうすればこのマージンを扱うことができますか？

出典

2017-07-12 touchingtwist

私は透明のdivは、パディングを持っていると思います。 – Seblor

@Seblorなぜですか？ブートストラップでは、すべてのdiv class = "col - * - *"にパディングがありますか？ – touchingtwist

本当に素早くチェックしてみましょう – Seblor

これら3つの.col-*がネストされているので、.col-*にはパディングがあります。一般的に言えば、.rowの中に.col-*クラスをネストする必要があります。 .rowは、.col-*クラスの左端/右端paddingをオフセットする負の左/右marginを作成します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body style="overflow-y:scroll;"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: darkgray; height: 50px;"> 
 
     <p style="word-break: break-all"> 
 
      <h6></h6></p> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center" style="background-color: transparent; height: auto;"> 
 
     <div class="row"> 
 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #003366; height: 40px;"> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #447e9b; height: 40px;"> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4" style="background-color: #ba2121; height: 40px;"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-07-12 16:45:57

あなたの誠実な答えをありがとう – touchingtwist

あなたが歓迎している@ touchingtwist :) –

Bootstrap3では、なぜこのマージンが存在するのですか？

答えて

関連する問題