web-dev-qa-db-ja.com

Twitter Bootstrap 3右マージンを削除し、行と列12にパディング

私は、Asp.Net MVC 5プロジェクトでTwitter Bootstrap 3.0 LESSソースを使用しています。TopNavbar（ ここに記載 ）を使用し、レイアウトページ。

行に100％のページ幅を使用するには、次を使用します。

<div class="row">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

ただし、これにより、各行の右側に余分なパディングが追加されます。これにより、ページに水平スクロールバーが追加され、ページを右にスクロールすると、ページ全体に空白の垂直ガターが表示されます。

各行のmargin-rightとすべてのcol-md-12のpadding-rightを削除すると、レイアウトが修正されます。ただし、これが正しい方法だとは思いません。

結果のbootstrap.css全体で、これらの不要なマージンとパディングをすべて一度に削除する方法はありますか？

htmlcsstwitter-bootstraplesstwitter-bootstrap-3
18
Santosh

あなたの問題は、.rowsを.containerクラスでラップしていないことが原因です。

これを試して：

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

width:100%;上の.containerは、行を100％（赤）にします。コンテンツの周囲にはまだパディングがあります（黄色）。このパディングはグリッドのガターです。以下を参照してください。 https://stackoverflow.com/a/19044326/1596547

いいえ、これは役に立ちません。 col-md-12のpadding-rightは引き続き有効です。私は、すべての列タイプ（col-*-12）に対して.lessソースで実装された一般的なものを探しています！

すべてのcol-*-*の両側に15pxのパディングがあります。 *-12クラスに違いはありませんが、*-12クラスにはフロートが残っていません。

すべてのcol-*クラスのcss/lessセレクター：

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

すべてのcol-*-12クラスのcss/lessセレクター：

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}
27
Bass Jobsen

元のbootstrap=コードは

.row{
   margin-right:-15px;
   margin-left:-15px;
}

そのため、パディングとスクロールバーがあります。

したがって、0pxでリセットする必要がありますが、一度だけ必要な場合は、元のbootstrap= CSSをオーバーライドしないでください。その後、通常の動作で使用できます。

私がやることは、このような別のクラスを追加することです：

<div class="row rowWithFullWidth">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

次に、このCSS

.rowWithFullWidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

そうすれば、.rowを通常の動作で使用できます。

6
Marc

この問題を解決する最も簡単な方法は、すべての列から左右のパディングをコメントアウトし、コンテナクラスの左右のパディングを0に設定し、行から負のマージンを削除することです。

691行目で.row classをコメントアウトし、714行目でclass ^ = "col-"の左右のパディングのコードをコメントアウトします。

それは私のために働いています：

.container {
     padding-right: 0;
     padding-left: 0; 
     margin-right: auto;
     margin-left: auto;
}

.row {
   /*margin-right: -15px;
    margin-left: -15px;*/
}

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

上記のように、最初に行うことはcontainerおよびrowクラスに一致させることです：

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

そのパディングを削除するには、次のようなcssを使用できます。

div.container.tight {
    padding: 0;
}

div.container.tight > .row-fluid {
    padding: 0;
}

クラスtightをコンテナに追加して、このパディングの削除をこの1つのスポット（またはtightが設定された他のコンテナ）に制限しました。グローバルにそれを行うと、潜在的にnavbarsなどの他のものに干渉する可能性があります。

0
user1118279

ブートストラップのソースコードに移動し、.rowセレクターを見つけて、関連付けられているcssを変更する必要があります。

これはおそらくあなたがやりたいことではないでしょう。

代わりに、このタイプの行に使用する独自のセレクターを作成することをお勧めします。ただし、これを行う場合、ブートストラップで使用される.rowセレクタと競合するため、.rowと呼ぶことはできません。 .custom-rowのような名前を付ける必要があります

0
Peter Berg

この問題は、Bootstrap 3で解決できます。

  1. クラスをcontainerまたはcontainer-fluidのクラスでdivにラップし、0pxのパディングを追加します。
  2. 水平オーバーフローを隠します。

例：

最初に行をコンテナでラップします。

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

次に、コンテナクラスに0pxのパディングを追加します。

.container {
    padding: 0px;
}

水平方向のオーバーフローを非表示にして終了します。

body {
    overflow-x: hidden;
}

タダ！

0
ariebear