25

ブートストラップで間隔をあけずにページに3列を取得しようとしています

ここに私が得るものがあります:

スパン失敗

ここに私が欲しいものがあります:

スパンウィン

ここに私が現在使用しているコードがあります:

<div class="row">
    <div class="span4 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span4 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span4 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

ブートストラップを使用して必要なものを達成する方法が本当にわかりません-助けていただければ幸いです

4

11 に答える 11

31

span次のように、グリッド要素間のスペースを削除する独自のクラスを作成できます。

CSS

.no-space [class*="span"] {
    margin-left: 0;
}

.row次に、コンテナdiv内に含めることができます。

<div class="row no-space">
    <div class="span3 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span3 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span3 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

また、.rowコンテナ クラスは20pxグリッド要素に対応するために左側で削除されるため、次のように削除する必要がある場合があることに注意してください。

.no-space {
    margin-left:0;
}

それで、何がうまくいくか見てみましょう。

デモ: http://jsfiddle.net/G36uQ/

于 2012-05-23T12:40:22.243 に答える
7

表示される列の間隔は、グリッド システムの意図によるものです。

列間にスペースを入れたくない場合は、これらの要素を直接スタイルし、グリッド レイアウト スタイルを使用しないでください。

于 2012-05-23T11:19:53.960 に答える
1

ブートストラップcssを生成するためにlessファイルを使用している場合は、variables.lessファイル内で@gridGutterWidthを0に設定します。そうでなければ、cssファイルのすべての余白とパディングを変更するのは本当に苦痛だと思います。

于 2012-05-23T11:24:24.127 に答える
1

ブートストラップで grid.less ファイルを確認すると、span* グリッドは単純な mixin で定義されています。

#grid > .core(@gridColumnWidth, @gridGutterWidth);

スペースなしで span* グリッドを構築するには、less で使用できます。

.my-nospace-grid {
    #grid > .core(78px, 0px);
}

これにより、12*78px = 936px が得られます。

Your values を選択するには、variables.less で定義されているデフォルトのサイズを確認します。

// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
于 2013-05-27T14:06:14.477 に答える
0

2列の行があります。3つについては、それに応じて調整します。そして、これを.cssに追加しました。これは、bootstrap.cssの後に読み込まれ、オーバーライドされます。

 .no-space { /*apply to the row */
      left-margin:0;
 }


 .row-fluid .span6 {  /* overrides bootstrap.css to allow for no gutter */
   /* width: 48.051948051948045%;
   *width: 48.008658008658%; */

   width: 50%;
   *width: 50%;
 }

そして、htmlは次のとおりです。

 <div class="row-fluid no-space"> <!-- r -->

            <div class="span6">
                <h4 class="titles">xxx</h4>
                <img src="img/system/xxx.png">
            </div> 

            <div class="span6">
                <h4 class="titles">xxx</h4>
                <img src="img/system/xxx.png">
            </div> 


  </div><!--/r-->

これで、幅50％の2つの列があり、間に溝はありません。

于 2012-09-12T17:31:09.053 に答える
0

一般に、ガターを維持したいが、右端にギャップを作成せずに狭めたり広げたりしたい場合は、関連する余白と幅が 100% になるようにします。左端のスパンには適用されません。したがって、3 列のレイアウトで、たとえば 0.5% のガターが必要な場合は、3*33% + 2*0.5% = 100% を選択します。

.row-fluid .span4 {
    width: 33%;
    margin-left: 0.5%;
}
于 2013-05-09T12:09:02.540 に答える
0 
 <div>
        <div class="container">
        <div class="row">
            <div class="span12">

                <div class="row">
            <div style="background:#000;" class="span6">testcont 1</div>
            <div style="background:#000;" class="span6">testcont 2</div>
            <div style="background:#000;" class="span6">testcont 3</div>
            <div style="background:#000;" class="span6">testcont 4</div>
                </div>
            </div>
            </div>
        </div> 
    </div>
于 2013-05-31T11:38:18.857 に答える