Bootstrap-Zeile ausrichten Problem

Folgende ist mein HTML:

<div class=container">
   <div class="row">
    <h2 class="text-center">Enter your name below</h2>
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
   </div>
</div>

Mein css ist folgende (zusammen mit bootstrap):

.profile-picture
{
    max-width: 200px;
    max-height: 200px;
}

.center
{
    margin: 0 auto;
    float: none;
}

Diese erzeugt die folgende Ausgabe:

, Wie ich es möchte angezeigt wird, wie unten gezeigt:

Wie kann ich das erreichen? Sollten Sie nicht angezeigt auf der GLEICHEN Linie zu sehen, wie Sie sind Teil der gleichen Zeile? Jedes hat eine Länge von 6 also, warum nicht Sie horizontal ausrichten?

Hast du es zur Arbeit? Ich ließ ein paar Kommentare und Anregungen in meiner Antwort.
FYI - Bearbeiten Sie Ihre post, die <h2> überschrift sollte nicht allein gelassen werden in der Reihe wie das. Wickeln Sie es in ein <div class="col-md-12" /> oder an meine untenstehende Beispiel (die Antwort)

InformationsquelleAutor Jordan Axe | 2013-11-11

3

Das problem ist, du bist das entfernen der notwendigen schweben Sie auf die Spalten (durch Einstellung float:none zu .center). Entfernen Sie die .center Klasse insgesamt, es wird nicht benötigt. Sie sind auch fehlende Zeile divs...

Hinweis, ich habe eine row um den h2 tag als gut. Für die Einfachheit der Nutzung und die richtige Formatierung, die tag muss gewickelt werden, wie gut. Hilft, die Formatierung überprüfen. 😉

Auch, Sie sollten nicht zwei <h3> tags einer nach dem anderen so. Verwenden <p> statt des zweiten h3 - oder besser noch, verwenden Sie einfach einen <h3> tag und verwenden <br /> zu brechen, die eine h3 in zwei Zeilen (siehe unten).
```
<div class=container">
    <div class="row">
        <h2 class="text-center">Enter your name below</h2>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
        </div>
        <div class="col-md-6">
            <h3>Profile name: N/A <br />
                Status: Waiting for user input</h3>
        </div>
    </div>
</div>
```
- Ich sehe. Allerdings möchte ich die Elemente zentriert werden, auf die Reihe (so in der Art wie text-center) - wie könnte ich das erreichen?
- Erstellen Sie eine ".text-center-Klasse"...weisen Sie die text-align: center CSS. Wenden Sie es auf das element. Wie jemand anderes erwähnt, ist es nicht klug zu bewerben styling-bootstrap-Elemente - wie die Spalten oder Zeilen. Aber solange es einfach Klassen, und nichts zu tun mit Schwimmern, Breite, Polsterung oder Ränder, Sie sollten in Ordnung sein. In diesem Fall, ich würde wohl die Anwendung einer "text-center" - Klasse zu den Spalten.
- Wenn dies für Sie arbeitet, vergessen Sie bitte nicht, die Antwort akzeptieren. 😉 Aktivieren Sie das Häkchen rechts neben meiner Antwort. Es ist, wie wir bezahlt werden, um hier...lol
- Ich sehe - vielen Dank!
InformationsquelleAutor Mike Barwick

Nie gelten irgendwelche styles oder Klassen auf Elemente mit raster-Klassen, wenn Sie nicht wirklich wissen, was Sie tun. Verwenden Sie eine verschachtelte div stattdessen, wenn Sie etwas ändern müssen:

<div class=container">

  <h2 class="text-center">Enter your name below</h2>

  <div class ="row">

    <div class="col-md-6">
      <div class ="center">
         <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
       </div>
    </div>

    <div class="col-md-6">
      <div class ="center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
      </div>
    </div>

  </div>
</div>

InformationsquelleAutor hugo der hungrige

Mit Bootstrap, haben Sie, um eine div mit einer Klasse row, so etwas wie dieses:

<div class="row">
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
</div>

Sehen Bootstrap-Dokumentation auf Ihre grid-system.

InformationsquelleAutor SeeMeCode

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.