Vollständige Version anzeigen : Bootstrap 3 Grid Positionierung


DeltaFox
14.02.2014, 15:21

Hallo,
nachdem ich den Post von elf4 gelesen habe, wollte ich mich auch einmal mit der Bootstrap 3 auseinander setzen und ein kleines Grid für eine Gallerie machen.

Nun bin ich aber auf ein paar Probleme gestoßen:

Ich habe mit

<div class="row">
<div class="col-md-2">
Bild oder Button
</div>
</div>


Ein Reihe mit Spalten erstellt. Nun möchte ich aber das die Reihe immer 1024px breit ist. Wie lässt sich sowas am besten bei der Bootstrap umsetzten? Weil eine neue Klasse anlegen mit 1024 und zu row hinzufügen hat nicht geklappt.

Ein weiteres Problem ist ich habe auch noch Buttons, diese möchte ich gerne am unteren Rand haben und nicht am oberen. Ich hab schon ein paar Sachen dazu über Google gefunden, aber diese haben alle nicht funktioniert. Gibts eine einfach Lösung zur Positionierung von Elementen innerhalb des Grids?

Vielen Dank schonmal :)

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
elf4
14.02.2014, 20:34

Bin jetzt kein Programmierer (sondern Mediengestalter) aber ich würde diesen Weg gehen.

Als erstes würde ich ein Media Query initialisieren das die Größen jenseits der 1024x768 abfängt und im Container auf 100% skaliert:

;media (min-width: 1024px) {
;container {
width: 100%
}


Als nächstes würde ich einen globalen Container im Form eines Wrappers definieren der die Seite mittig ausrichtet und dann auf 1024 Breite skaliert. Durch den zuvor gesetzten Media Query behält der Container von Bootstrap sein responsive Verhalten bis zu einer maximalen Breite von 1024 Pixeln.

;wrapper{
max-width: 1024px; /* Inhalt wird auf 1024 Skalliert */
margin: 0 auto /* Positioniert die Seite Mittig */
}


Bei deinen zweiten Problem würde ich einfach die Helper Klasse Pager heranziehen um die Button Gruppe mittig zu positionieren.


<section class="pager">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
</section>


Hier das komplette css:

;media (min-width: 1024px) {
;container {
width: 100%
}
}
;wrapper{
max-width: 1024px; /* Inhalt wird auf 1024 Skalliert */
margin: 0 auto /* Positioniert die Seite Mittig */
}

header p,
sektion p{
padding:15px;
}


das komplette html:

<body>
<div class="clearfix wrapper">

<header class="bg-primary">
<p>Bootstrap 3 Grid Positionierung</p>
</header>

<section>
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-2">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-9 col-sm-10">
<p>..;</p>
</div>
</div>
</div>
</section>

<section class="pager">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
</section>

</div>
</body>


Demo: Bootstrap 3 - JSFiddle (;jsfiddle~net/elf4/4AWTd/69/)
Responsive Preview:
Responsinator
- jsfiddle~net/m/xtw/ (;;;responsinator~com/?url=http%3A%2F%2Fjsfiddle;net%2Fm%2Fxtw%2F)


DeltaFox
23.02.2014, 13:24

Da ich erst jetzt dazugekommen bin es auszuprobieren, antworte ich erst jetzt so spät :) Danke es funktioniert super!
Jetzt weiß ich auch wo mein Fehler lag.

Gruß


DeltaFox
02.04.2014, 17:05

So ich frag hier einfach mal in meinem alten Thread. Ich hatte nun ewig keine Zeit mehr mich weiter mit Bootstrap auseinander zusetzen. Nun wollte ich aber den Container welcher 1024px breit ist mit col-md-* füllen so dass diese insgesamt auch genau 1024 breit sind.
Also habe ich einfach mal ein div mit class row erstellt und dieses mit col-md-2 gefüllt nun sprengen diese aber jedesmal die 1024px.

Wie kann man sowas bei Bootstrap am besten lösen?

Danke :)


Ähnliche Themen zu Bootstrap 3 Grid Positionierung
  • [CSS] login div positionierung
    also ich hab nen div mit breite 220 und höhe 100. dieses login soll da rein, also ich hab die zwei felder und den text und button usw. auch. aber ich weiß nicht wie man das genau so positionieren würde. kann mir da jemand sagen wie das geht? soooo solls aussehen--> (;pict~cc/0ce0cc44579 [...]

  • Bootstrap
    Hallo, ich hab da ein ganz schönes Problem vorliegen.;geht zwar nicht um meinen PC.. aber wäre toll wenn mir irgendjemand sagen kann was ich dagegen tun könnte! Also das Problem tritt unter anderem auf wenn ich z;b. ICQ oder MSN installieren möchte... der einzige Messenger der noch läuft ist [...]

  • Bootstrap CC BY 3.0
    Hallo Zusammen, ich stehe mal wieder vor dem Problem mit der Lizensierung eines meiner Projekte! Ich entwickele ein System, welches ich verkaufen möchte. Hierzu überlege ich das Bootstrap (;twitter;github~com/bootstrap/)-Framwork zu verwenden. Dieses steht unter der CC BY 3;0 (;creativecommons~o [...]

  • Bootstrap 3 - Grid Optimierung
    Eine Frage an unsere Coder hier. Hab mit Bootstrap 3 eine 8-4 / 12-6 Layout erstellt und würde gern wissen, ob man dies noch besser schreiben kann, denn obwohl es funktioniert sieht es sehr unschön aus. Bootstrap Responsive Grid (8-4) (12-6) example code (;bootply~com/elf4/112106) <sectio [...]



raid-rush.ws | Imprint & Contact pr