14

Twitter Bootstrapから始めて、レイアウトがどのように機能するかについて質問があります。HTMLは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Test</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script  src="http://code.jquery.com/jquery-latest.js"></script>
        <script  src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span4">a</div>
                <div class="span8">b</div>
            </div>
            <div class="row">
                <div class="span12">c</div>
            </div>
        </div>
    </body>
</html>

style.css：

div.container
{
    background-color:#aaa;
}
div.span4, div.span8, div.span12
{
    background-color:#eee;
    border: 1px solid #888;
    border-radius:3px;
}

span4とspan8に境界線を追加すると、幅が広がり、最終的には次のようになります。

ブートストラップスパンレイアウト

span4とspan8は、同じライン上にあるはずですが、スタックされます。.cssファイルで幅を狭めてこれを修正するか、次を使用できることに気付きました。

http://paulirish.com/2012/box-sizing-border-box-ftw/

しかし、Bootstrapはこれを修正する手段を提供します（境界線を追加または削除するたびにCSSを追加しないなど）

4

5 に答える 5

33

ブートストラップのスパンクラスには特定の幅があるため、境界線を追加すると、行の合計が破棄され、強制的に折り返されます。これを回避するために、私は通常、スパンクラスを使用してdiv内のdivに境界線のスタイルを設定します。このようなもの：

HTML

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

CSS

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}
于 2012-10-16T21:00:45.853 に答える
5

私はまったく同じ問題を抱えていて、ボックスサイジングで遊んでもまったく役に立ちませんでした。最終的に私のために働いた唯一の解決策は、を使用することでしたrow-fluid。

行流体との違いは、固定ピクセルではなくパーセンテージに基づいていることです。次に、行の子スパンは、通常のピクセル幅の行の親スパン幅に加算されるのではなく、常に最大12になります。

たとえば、あなたは今

<div class="container">
    <div class="row-fluid">
        <div class="span4">a</div>
        <div class="span8">b</div>
    </div>
    <div class="row-fluid">
        <div class="span12">c</div>
    </div>
</div>

これで、余白、パディング、または境界線を変更しても問題は発生しません。

于 2013-05-30T12:28:05.117 に答える
1

divを同じラインに維持したいようですね。そのためには、幅を指定してフロートさせる必要があります。Divは、常に互いに積み重ねたいと思う傾向があります。

これがフィドルです：http：//jsfiddle.net/me73v/

于 2012-10-16T20:41:12.633 に答える
0

もう1つのオプションは、JQueryを使用してスパン幅を微調整することです。

$(".some-bordered-container [class*=span] ").each(function(index) {
    $(this).width($(this).width()-1);
});

それは私にとってうまくいくようです。ピクセルを見逃しません。

于 2013-02-13T19:20:30.517 に答える
0

負のマージンを使用することもできます：

div.span4, div.span8, div.span12
{
    background-color: #eee;
    border: 1px solid #888;
    border-radius: 3px;
    margin: -1px;
}

box-sizing: border-box、IMHOを使用するほど良い解決策ではありませんが、を使用せざるを得ない場合は、それが機能することに注意する価値がありますbox-sizing: content-box。

于 2013-10-09T10:11:27.930 に答える