1

5列のグリッドがあります。私は最初にそれらを次のように設定しました:

<div class="row">
    <div class="span1">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

最初の列には、幅が同じ18pxの2つのアイコンのいずれかが含まれています。ただし、span1は60pxに解決されるため、多くの無駄なスペースがあります。

18pxの列を宣言するにはどうすればよいですか?

これは私のアプリの1ページにのみ影響するため、Bootstrap CSS全体をカスタマイズするだけでは不十分ですよね?

4

1 に答える 1

3

独自のクラスを追加できます。

...
.myspan {
    width:18px;
    margin-right:52px;
}
...

次に、クラスをタグに追加します。

<div class="row">
    <div class="myspan">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

または、インライン css を使用することもできます (ただし、きれいではありません)。

<div class="row">
    <div class="span1" style="width:18px;margin-right:52px">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

「スパン」を含むすべてのクラスmargin-leftは 30px を取得して設定されるfloat:leftため、margin-right および width プロパティを指定するだけで済みます。

これは、[class*="span"]セレクターが原因です。bootstrap.css

この例では、グリッド システムを維持するために 52px の margin-right を設定していますが、無駄なスペースが必要ない場合は、10px に変更できます。

于 2012-12-12T10:24:56.937 に答える