Zwei 50% - Spalten mit Twitter Bootstrap

Wie erstellen von 2 Spalten von 50% mit Twitter Bootstrap 3? Was ich versucht habe:

<div class="container">
<!-- Footer -->
  <div class="footer">
    <div class="footer-info">
      <div class="row">
        <div class="col-lg-6"><h3>Contact Us</h3></div>
        <div class="col-lg-6"><h3>Products & Services</h3></div>
    </div>      
    </div>
  </div>
</div>    
<!-- End Footer -->

InformationsquelleAutor Ch'an Armstrong | 2014-01-14

  1. 8

    Es ist Ihre Antwort:

    Jsfiddle : http://jsfiddle.net/g9y4P/

    immer 50% Breite

        <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
</div>

    InformationsquelleAutor Samira Khorshidi

  2. 4

    Erste, layout das richtige für die semantische Netz

    Warum es nicht funktioniert in deinem Fall??

    • Haben Sie verwendet col-lg-6 ( demo), die für Large devices Desktops (≥1200px) müssen Sie gibt die classes für kleinere Bildschirmgrößen zu, das ist, was Sie verpasst haben!!( demo mit nur einer Spalte festlegen zur Anpassung an Bildschirme )

    • Da Sie folgende BS-markup...es ist immer eine gute Praxis, definieren Sie die Breite Ihrer container wie <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> macht es die Anpassung an verschiedene viewports!

    demo

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="container">
        <!-- Footer -->
        <div class="footer" style="border:1px solid #000">
            <div class="footer-info">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <h3>Contact Us</h3>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                         <h3>Products & Services</h3> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--- //container -->
</div>
<!--- //col-xs-12 col-sm-12 col-md-12 col-lg-12-->
<!-- End Footer -->
    warum downvote...kümmern zu erwähnen, bitte??? 🙂
    Ich weiß nicht, wieso der downvote, aber Sie die Antwort vollständig beantwortet die Frage, ich upvote, sonst ist es nicht fair.
    hehe..danke Kumpel...so hast du eine endgültige Antwort...ich sehe nicht ein, jede akzeptierte Antwort, die Sie noch auf der Suche für einige Erklärung oder Klarstellung!!?? 🙂

    InformationsquelleAutor NoobEditor

  3. 2

    Laut twitter bootstrap:

    Zeilen gesetzt werden müssen, innerhalb .container für die ordnungsgemäße Ausrichtung und Polsterung.

    <div class="footer">
  <div class="footer-info container">
    <div class="row">
      <div class="col-xs-6"><h3>Contact Us</h3></div>
      <div class="col-xs-6"><h3>Products & Services</h3></div>
    </div>      
  </div>
</div>

    http://getbootstrap.com/css/#grid-intro

    InformationsquelleAutor Chase

  4. 1

    Kann ich sehen, das problem:

    http://jsfiddle.net/AYd5t/

    können Sie versuchen, mit

    .col-md-6 statt .col-xs-6

    können Sie die Dokumentation hier:

    http://getbootstrap.com/css/#grid

    Der Unterschied in der md-vs xs ist für responsive Websites. wenn Sie wollen immer noch zu haben, 50% Spalten an die kleinste Größe(xs) dann müssen Sie die Verwendung von xs nicht md.
    Ich habe deaktiviert Reaktionsfähigkeit auf dieser Seite, würde das ein problem sein.
    warum deaktiviert man es???seine Basis-feature des BS!! 🙂
    Ich weiß! Aber der Projekt-Anforderungen.

    InformationsquelleAutor kamus

  5. 0

    Ich bin nicht zu sehen, ein offensichtliches Problem mit dem snippet, das Sie gebucht. Können Sie Ihre full HTML? JS Bin oder JS Fiddle wäre ideal.

    Wenn das nicht für Sie arbeiten, vielleicht check, haben Sie ein äußeres div mit einer Klasse namens "container", und dass Ihre links auf die Bootstrap CSS-und JS-Dateien gültig sind.

    InformationsquelleAutor Neil Cresswell

Schreibe einen Kommentar