Ausrichten Von Text In Der Bootstrap-Auch Neben FontAwesome Icon

Ich habe Schwierigkeiten ausrichten meine überschrift und Absatztext in einem "gut". Die "none" sehen, ist eine Klasse zu entfernen, die bestimmten Ränder und ist nicht relevant, was ich versuche zu erreichen.

Hier ist mein code

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <h3>Test</h3>
        <p>text goes here</p>
    </div>
</div>

Hier ist, was es tut und was ich will, es zu tun.

Ausrichten Von Text In Der Bootstrap-Auch Neben FontAwesome Icon

Vielen Dank für Ihre Hilfe!

InformationsquelleAutor Jayson H | 2014-09-09
  1. 1

    Ich würde vorschlagen, Sie machen leichte Veränderung in Ihrer html-Struktur und wickeln Sie den text-Inhalt in der div und seine Darstellung als inline-block

    <div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <div class="text">
           <h3>Test</h3>
           <p>text goes here</p>
        </div>
    </div>
</div>

    - und css-Code für das zusätzliche div ist 

    .text {
    display:inline-block;
}

    Js Fiddle Demo

    • Sachin, es ausgerichtet, der text perfekt, aber ging alles nach unten. i.imgur.com/IRMG8mO.png
    • kannst du bitte ein Turnschuh, zeigen Sie Ihre css-und html zusammen mit dem problem..
    InformationsquelleAutor Sachin
  2. 1

    Ich würde dies tun die folgende Art und Weise. Ich mag verschachtelte Zeilen, wo immer möglich, Dinge sauber zu halten.

    /** CSS **/
.well h3 {
    margin-top:0px;
}
.fs48 {
    font-size:48px;
}

/** HTML **/
<div class='row'>
    <div class='col-md-4'>
        <div class='well'>
            <div class='row'>
                <div class='col-xs-3 text-center'>
                    <span class='glyphicon glyphicon-user fs48'></span>
                </div>
                <div class='col-xs-9'>
                    <h3>Test</h3>
                    <p>text goes here</p>
                </div>
            </div>
        </div>
    </div>
</div>

    Siehe ein Beispiel hier : http://jsfiddle.net/D2RLR/6779/

    Können Sie ersetzen Sie einfach die Glyphe mit der font-awesome-Klasse.

    • Dank Tyler. Ich habe versucht, diese Methode und ich habe das gleiche Problem wie unten angegeben. Es scheint, ich bin mit widersprüchlichen CSS irgendwo.
    InformationsquelleAutor Tyler Evans
Schreibe einen Kommentar