How to Make 1/5 Column Grid in Bootstrap 3

Habe ich ein layout, das ich drei Div nebeneinander, wie:

<div class="row">
    <div class="col-md-1.5" id="legend"></div>
    <div class="col-md-0.5" id="icon"></div>
    <div class="col-md-10"  id="map"></div>
</div>

Ich weiß es auch möglich, die Legende und ein Symbol, das div in einer row aber ich brauche, um Sie zu trennen, während die legend wird schieben können und in diesem Fall habe ich zu ersetzen, die col-md-10 aus map mit col-md-11.5.

Können Sie leasen lassen Sie mich wissen, wie kann ich das machen?

InformationsquelleAutor Suffii | 2014-03-27
  1. 9

    Bootstrap 3

    Verschachteln, wie diese..

    <div class="row">
    <div class="col-md-2">
       <div class="col-md-9" id="legend"></div>
       <div class="col-md-3" id="icon"></div>
    </div>
    <div class="col-md-10" id="map"></div>
</div>

    http://www.bootply.com/125259

    Update für die Bootstrap-4

    Hier ist ein 1/5-Spalte in der Bootstrap-4 (keine extra CSS oder SASS) mit dem auto-layout-grid..

    <div class="container-fluid">
    <div class="row">
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col-2">2</div>
        <div class="col">1/5</div>
    </div>
</div>

    http://www.codeply.com/go/gjmzB4MTMe

    Diese Lösung funktioniert, weil die Bootstrap-4 ist nun flexbox. Sie können die 5 Spalten zu umbrechen, innerhalb derselben .row mit einem clearfix brechen wie <div class="col-12"></div> oder <div class="w-100"></div> sehr 5 Spalten.

    • aber wenn Sie eine jQuery-Funktion schieben Sie Links in der Legende auf Nachfrage und nur halten Sie auf das Symbol. also, wie würde erhöhen Sie die Größe der Karte zu decken, bleiben alle Platz?
    InformationsquelleAutor Zim
Schreibe einen Kommentar