Wie verwenden von span-und offset-Klasse in twitter bootstrap
Ich bin nur ein Anfänger in Twitter Bootstrap.
Ich versuche, mit seiner grid-Funktionalität durch die Verwendung von Klassen, span und offset.
Hier ist mein code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul.unstyled > li {
list-style-type: none;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span3 offset5">
<ul class="unstyled">
<li>
<label for="optionsRadios1">A.</label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option 1
</li>
<li>
<label for="optionsRadios2">B.</label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2
</li>
<li>
<label for="optionsRadios3">C.</label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">option3</li>
<li><label for="optionsRadios4">D.</label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">option4</li>
<li><label for="optionsRadios5">E.</label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">option5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span3 offset5">
<input type="checkbox">Mark To review</input>
</div>
</div>
</body>
</html>Kann bitte jemand mir sagen, wo ich bin, zu verwechseln?
Ich bin nicht immer offset-Marge in meiner Webseite.
Ich benutzt beschriebenen code in der Bootstrap-Beispiel http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Meine HTML-Webseite code ist
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</body>
</html>Und ich bin nicht immer meiner Seite mit keine Ränder oder offsets. Hier ist der screenshot:
Ich bin nicht in der Lage zu zeigen, wo das problem ist.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erste Antwort
Müssen Sie wickeln Sie Ihre
<div>Elemente innerhalb einer<div class="row">element. dies sollte den trick tun. Haben Sie einen Blick auf die Beispiele, an http://twitter.github.io/bootstrap/scaffolding.html#gridSystem, um mehr zu erfahren.Auch Sie nicht in der Nähe Ihres
<input>Elemente, das könnte zu unerwünschten Ergebnissen. Endlich kann ich keinen import von Bootstrap-CSS-Datei. Daher, werden die Stile für die grid-Systeme sind nicht erhältlich in Ihrem web-Seite.Hier ist eine funktionierende jsFiddle: http://jsfiddle.net/VTbAA/1/
Update (2. Beispiel)
Wieder, Sie vermissen Ihre CSS-import. Es funktioniert gut, sobald Sie die Bootstrap-CSS-Datei. Beachten Sie, dass Sie auch fehlen, um in der Nähe einige
<div>Elemente. Darüber hinaus Bootstrap bietet eine 12-grid-basierte system. Damit Ihr Spalten hinzufügen sollte bis zu 12.Die wichtigste Zeile ist die import-Anweisung:
div- tags. Dies ist jedoch nicht das eigentliche problem. Seine fehlende CSS. Auch ist es eine 12-grid-basierte Systeme, also die Spalten sollen bis zu 12.