gridBox in center?

Fyndor

Hallo Leute,

ich bin gerade etwas am ausprobieren. Seit 2 Tagen bastel ich an einer neuen Seite - eine OnePage mit Woltlab Suite Core 3.0 (inkl. Forum).

Das gröbste ist geschafft, doch ich brauche unbedingt noch eine gridBox, die im center steht. Aktuell ist es dies:

Code

<div class="gridBox col-md-4">
                        <div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
                            <div class="gridBboxContentHeroIcon filled">
                                <span class="icon icon64 fa-gears"></span>
                                <h2 class="gridBoxTitle">Lorem Ipsum</h2>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>

das col-md-4 nicht die richtige für ein center ist, weiß ich. Problem ist: Welche ist es? Ich hab bereits ein bisschen ausprobiert aber nichts klappt wie gewollt. Ich kann auch problemlos individuellen CSS Code unterbringen, falls nötig.

T3RRORTOAST

Arbeitest du lokal?

Ich bräuchte sonst einmal die Website an der du arbeitest (URL), da ich leider kein Bootstrap Projekt gerade habe um das zu testen.

Fyndor

Kommt per PN

T3RRORTOAST

Es kommt darauf wie du es machen möchtest. Also wenn es dir egal ist, dass du neuen CSS Code hinzugügst, dann füg einfach die Klasse ".centered" bei

Code

<div class="gridBox col-md-4 centered">

ein

Und das im CSS:

Code

.centered {
float: none;
margin: 0 auto;
}

Ansonsten wenn du nur Bootstrap nutzen willst und kein extra CSS kann ich dir den Link nahe legen: http://stackoverflow.com/questions/1815…ter-bootstrap-3

Fyndor

Also ich habs grad mal mit dem CSS gemacht - Problem: Siehe Seite.

<h2 class="gridBoxTitle">Server</h2>

Die Formatierung von h2 ist weg.

T3RRORTOAST

In allen andern Boxen verwendest du zusätzlich den Container

Code

<div class="gridLayout row"></div>

Umschließ einfach deinen Code oben mit den gleichen Div-Container und das CSS für h2 wird wieder angewendet.

Denn der Style für die Überschrift ist an .gridLayout gebunden (einfach ausgedrückt)

Code

.gridLayout .gridBoxTitle {
    margin-bottom: 10px;
    font-size: 18px;
}

Fyndor

Wow, danke dir für die Hilfe