Hinzufügen von Rahmen zu spannen divs in der Bootstrap-layout versaut

Bin ich angefangen mit Twitter Bootstrap und habe eine Frage dazu, wie layout-Funktionen. Hier ist der 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>

Stil.css:

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

Hinzufügen Grenze zu span4 und span8 erhöht Ihre Breite und ich am Ende mit diesem:

Hinzufügen von Rahmen zu spannen divs in der Bootstrap-layout versaut

span4 und span8 bekommen gestapelt, während Sie sollte auf der gleichen Linie. Ich merke, ich könnte verringern Ihre Breite in meine .css-Datei, und korrigieren Sie diese, oder verwenden Sie diese:

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

aber tut Bootstrap-Mittel bereitzustellen, um dies zu korrigieren (nicht das hinzufügen von zusätzlichen CSS-jedes mal, wenn ich hinzufügen oder entfernen, border, etc)

InformationsquelleAutor der Frage Anonimista | 2012-10-16

  1. 33

    Span-Klassen in der bootstrap bestimmten breiten, so das hinzufügen einer Grenze wirft die Summe für die Zeile und zwingt Sie zu wickeln. Um dies zu umgehen habe ich in der Regel setzen die Grenze styling auf ein div innerhalb des div mit span-Klasse. So etwas wie dieses:

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

    InformationsquelleAutor der Antwort joshb

  2. 5

    Ich hatte genau das gleiche Problem und spielen mit dem box-sizing überhaupt nicht hilfreich. Die einzige Lösung, die für mich gearbeitet am Ende war der Einsatz row-fluid.

    Den Unterschied mit row-fluid " ist, dass Sie basierend auf Prozentsätzen, nicht Feste Pixel. Dann wird das Kind erstreckt, in einer Reihe, immer fügen Sie bis zu 12, anstelle der Zugabe Ihre Eltern Spannweite in der normalen pixel Breite Zeilen.

    So zum Beispiel würde dir jetzt 

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

    Nun bekommst du keine Probleme mit sich ändernden Margen, Polstern, oder Grenzen.

    InformationsquelleAutor der Antwort jodyfanning

  3. 1

    Es klingt wie Sie wollen deine divs bleiben auf der gleichen Linie, ja? Das zu tun, müssen Sie geben Sie eine Breite und float. Divs dazu neigen, immer wollen, stapeln Sie auf der jeweils anderen.

    Hier ist ein Turnschuh: http://jsfiddle.net/me73v/

    InformationsquelleAutor der Antwort Scott Hillson

  4. 0

    Eine andere option wäre, zwicken die Spannweiten mit JQuery:

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

    Es scheint zu funktionieren gut für mich. Ich verpassen Sie nicht die Pixel.

    InformationsquelleAutor der Antwort Tony Smith

  5. 0

    Können Sie auch mit negativen Margen :

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

    Es ist nicht so gut, eine Lösung wie die Verwendung box-sizing: border-boxIMHO, aber es ist nur bemerkenswert, das es funktioniert, wenn Sie gezwungen sind, verwenden Sie box-sizing: content-box.

    InformationsquelleAutor der Antwort Michael Baudino

Schreibe einen Kommentar