Auslegen Fußzeile mit Bootstrap grid

Ich habe da ein paar Fragen, die Erreichung der Art von Netz, die ich im moment brauchen. Es ist eine Fußzeile, so will ich, dass es 12 Spalten lang, zwei gestapelt auf der jeweils anderen. Jedes enthält seinen eigenen Inhalt. Aber am "Ende" dieses Netz möchte ich ein großes logo. Hier ist ein Beispiel.

Wie Sie sehen können, gibt es 3 Spalten. Ich möchte es zu 4 sein, aber der 4. muss eine Höhe von 100%, nicht zwei übereinander wie der rest. Hier ist was ich habe, so weit.

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-3">1</div>

      <div class="col-md-3">2</div>

      <div class="col-md-3">3</div>
    </div>

    <div class="row">
      <div class="col-md-3">1</div>

      <div class="col-md-3">2</div>

      <div class="col-md-3">3</div>
    </div>
  </div>
</footer>

hinzufügen max-width:100% für Bild
Wo füge ich die 4. col-md-obwohl? Ich habe versucht, indem max-width:100%, wenn ich Hinzugefügt die 4. col in die erste Reihe, aber es drängte die ganze untere Zeile nach unten. Ich will nicht das Bild drücken das untere Bild unten.
fügen Sie Ihren code fiddle

InformationsquelleAutor b4n4n4 | 2015-09-16

Versuchen folgenden code

DEMO

<footer>
  <div class="container">
      <div class="row">

        <div class="col-md-9">
          <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
          </div>

          <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
          </div>
        </div>

        <div class="col-md-3">Img</div>

    </div>
  </div>
</footer>

InformationsquelleAutor amol

Iam-in der Hoffnung, dies ist, was Sie suchen:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">1
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">1
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">2
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">3
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">3
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
    </div>
</div>

InformationsquelleAutor Amith Raj Shetty

Wie zu versuchen, diese für md Bildschirm..

HTML

CSS:

.first-row {
  border: 1px solid red;
}
.second-row {
  border: 1px solid green;
}
.image-column {
  border: 1px solid blue;
}

HTML:

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="row first-row">
          <div class="col-md-4">1</div>

          <div class="col-md-4">2</div>

          <div class="col-md-4">3</div>
        </div>


        <div class="row second-row">
          <div class="col-md-4">1</div>

          <div class="col-md-4">2</div>

          <div class="col-md-4">3</div>
        </div>
      </div>

      <div class="col-md-3 image-column">
        <img src="..." , alt="..." />
      </div>

    </div>
  </div>
</footer>

InformationsquelleAutor Amit singh

Ich denke, das ist, was Sie wollen...

<footer>
<div class="container">
    <div class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12"><img src="" class="img-responsive"></div>
            </div>
        </div>
    </div>
</div>

Art. Diese immer noch drängt die zweite Reihe nach unten obwohl. Ich will es zu der oberen Zeile (1,2,3) und einer unteren Zeile direkt darunter (ein weiteres 1,2,3). Ich kann nicht die untere Zeile geschoben werden nach unten aus dem Bild.

InformationsquelleAutor CodeRomeos

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.