Erstellen von responsive divs in der bootstrap

Ich experimentiere mit bootstrap und dies ist der code, den ich schrieb,:

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
        <style type="text/css">
            .row-centered {
                text-align:center;
            }
            .col-centered {
                display:inline-block;
                float:none;
                text-align:left;
                margin-right:-4px;
            }
            .pos{
                position: relative;
                top: 240px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row row-centered pos">
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-centered">
                    <div class="well"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Die Ausgabe ist, wie gezeigt, im screen-shot:

Aber wenn ich konvertieren Handy-Bildschirm, ich bekomme wie diese:

Ich möchte die divs erscheinen in der Mitte mit einer über ein im Smartphone-Displays als auch. Wie kann ich es tun?
Aber es ist nicht responsive.

verwenden Sie col-md-8 col-sm-8 zusammen mit der col-lg
haben Sie versucht, ändern Sie die Anzeige zu blockieren, nicht inline-block? Ich bin nicht bereit für jsfiddle jetzt

InformationsquelleAutor Ajay Kulkarni | 2015-03-13

können Sie col-xs-12 in dein div ist , fügen Sie diese, um die einzelnen div-und es wird funktionieren, wie Sie erwarten, dass es

LIVE-DEMO

  <body>
        <div class="container">
            <div class="row row-centered pos">
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
                <div class="col-lg-8 col-xs-12 col-centered">
                    <div class="well"></div>
                </div>
            </div>
        </div>
    </body>

Mehr über bootstrap grid option

InformationsquelleAutor Ze Rubeus

Können Sie festlegen, mehrere breiten für Bildschirmgrößen :

col-lg : großer Bildschirm

col-md : Mitte Bildschirm

col-xs : kleiner Bildschirm

In deinem Beispiel :

<div class="container">
    <div class="row row-centered pos">
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
        <div class="col-lg-8 col-xs-12 col-centered">
            <div class="well"></div>
        </div>
    </div>
 </div>

InformationsquelleAutor maX

0

Was Sie getan haben, für mich, ist nicht schlecht.

Sie brauchen nur zu ändern, die CSS, wie folgt:
```
    .row-centered {
        text-align:center;
        margin:0 auto;
    }
    .col-centered {
        display:block;
        float:none;
    }
    .pos {
        position: relative;
        top: 240px;
    }
```
Wenn Sie möchten, um es kleiner machen, reduzieren einfach 8, 7 oder 6 und es ist alles getan effizient. Mit col-lg ist wahr, für große Bildschirm und würde es nicht machen, es stecken verwenden Sie für die mobile performance.

InformationsquelleAutor Herman Nz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.