19

Asp.Net MVC 5 プロジェクトで Twitter Bootstrap 3.0 LESS ソースを使用しています。トップ ナビゲーション バー (ここで指定) を使用してから、レイアウト ページにいくつかの行を追加します。

行に次を使用して、ページ幅を 100% にします。

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

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

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

結果のbootstrap.css全体で、不要なマージンとパディングを完全に削除する方法はありますか?

4

6 に答える 6

27

あなたの問題は、あなた.rowの s を.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>

行を 100% (赤)にwidth:100%;します。.containerは、コンテンツの周囲のパディング (黄色) のままです。このパディングはグリッドのガターです。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;
}
于 2013-11-19T20:04:07.287 に答える
0

上記のように、最初に行うことは、一致するコンテナーと行のクラスを用意することです。

<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;
}

コンテナーにタイトなクラスを追加して、このパディングの削除をこの 1 つの場所 (またはタイトな他のコンテナー) だけに制限しました。グローバルに実行すると、navbars などの他のものに潜在的に干渉する可能性があります。

于 2014-08-20T00:33:37.170 に答える
0

Bootstrap 3 では、次の方法でこの問題を解決できます。

  1. コンテナーまたはコンテナー流体のクラスを使用して行を 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;
}

タダ！

于 2015-07-28T18:35:20.920 に答える
0

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

これはおそらくあなたがしたいことではありません。

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

于 2013-11-02T14:18:11.970 に答える