bootstrap-Zeilen und Spalten funktioniert nicht

Bootstrap ist ein fantastischer Rahmen, obwohl, während es zu benutzen, müssen Sie wissen, dass es bestimmte Klassen, die ein muss sind, für Sie zu wissen. Lassen Sie mich Ihnen ein paar wichtige.

Container und Zeilen sind sehr wichtig-Klassen, wenn Sie möchten, dass Ihre Bootstrap-Seiten zu reagieren.

Hier sind ein paar Regeln, die Sie Folgen müssen, wenn mit Bootstrap:

1. Alles wird verpackt in einem container-Klasse;
2. Die Reihe Klasse, kommt sofort als Nächstes und darf maximal 12 Spalten. Wenn Sie weitere hinzufügen möchten, fügen Sie eine weitere row Klasse und dann innerhalb der Zeilen, die erklären, die Zahl der col du willst.

Zu erarbeiten, was ich sagte, nehmen Sie einen Blick unten

<div class="container">
<div class="row">
    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 9 columns more i can create and after that i will have to declare another 
            "row " class , though I can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 6 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 3 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <div class="col-md-3">
        <h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12 
            so i have another 0 coloums more i can create and after that i will have to declare another 
            "row " class , though i can declare the new row class in the same container 
        </h1>
    </div>  

    <!-- now that we have used up all the 12 coloumbs in this row , lets go create a new "row class" , Alas in the same container -->
</div>  <!-- end of row -->

<div class="row">
    <div class="col-md-12">
        <h1>I am a col , that spans the entire 12 coloumbs that this row had to offer , by now you should know that if you want to create another coloumb , you have to go create another "row" class</h1>
    </div>
</div>
</div>  <!-- end of container -->

Nun kopieren Sie den obigen code, wenn Sie nicht anzeigen können, Sie hier und fügen Sie ihn in Ihren text-editor, und vergleichen Sie Ihre code ein, und meine, und prüfen Sie, wo Sie haven ' T Hinzugefügt die container und row Klassen und hinzufügen. Bootstrap ist ein Idealer Rahmen, aber es gibt bestimmte Klassen, die Sie hinzufügen müssen, und Sie sind ein muss oder ein anderes Bootstrap will einfach nicht funktionieren.

Hoffe, das löst dein problem, ich hätte einfach bearbeitet den code und Ihnen gesagt, was falsch ist, aber ich dachte, es war mehr wichtig für Sie zu wissen, die Struktur von Bootstrap-code.

Auch, kommen zu Ihrem letzten Punkt, die lokal arbeiten, eine heruntergeladene Kopie ist immer besser als ein CDN, vermeiden Sie das hantieren mit Bootstrap.css-Datei, es sei denn, Sie wissen, was Sie tun, schreiben, eine separate CSS-Datei überschreibt die vorhandene Bootstrap-code. Machen Sie eine Google-Suche nach "GitHub Bootstrap 3.0" aus und gehen Sie laden Sie die bootstrap.css Datei lokal, und es ist alles bereit, um bearbeitet werden.

InformationsquelleAutor gautamz07

Versuchen Sie einen anderen Ansatz, um das hinzufügen der Dateien - direkt verbinden Sie Sie über Ihre Brust-tag. Setzen Sie die folgenden in Ihrem Kopf Abschnitt; es war gerade gezogen, die von der website:

HTML (Head-Bereich):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Diesem link werden alle erforderlichen Dateien auf Ihrem HTML. Allerdings können Sie hinzufügen den letzten link (javascript) auf die Unterseite des body-tag, kurz bevor Sie das Ende, für die Leistung. Zeigen Sie, dass Ihre syntax korrekt ist, Folgen Sie den unten stehenden link um die demo, die ich produziert habe, zeigt Ihren genauen code arbeiten mit BootStrap 3.2. Dieser soll in der Lynda Übungen, die Sie versuchen, zu vollenden 😉

DEMO auf JSFiddle

InformationsquelleAutor BuddhistBeast

In der link für bootstrap.min.css
Stellen Sie sicher, dass die Referenz relativ zu dem Verzeichnis "dist/css/bootstrap.min.css"

InformationsquelleAutor rob