# Bootstrap nav-tabs stylen



## StefanF195 (22. September 2013)

Hallo, ich habe eine vorgegebene Klasse von bootstrap benutzt, um ein Navigationsleiste mit tabs zu bekommnen.
also class="nav nav-tabs"  .....
Das ganze hat also den Stil:
http://webdesigntutsplus.s3.amazona...p_pills_tabs/Tabs-Pills-BEGIN/tabs-pills.html

Nun möchte ich gerne die Höhe davon verändern, aber leider bekomme ich nur die untere Linie unter den nicht aktiven Tabs verändern, aber nicht die gesamte Höhe, also auch vom akiven Tab.

Vielen Dank schonmal für Eure Mühe.

Lieben Gruß

Stefan


----------



## Jan-Frederik Stieler (22. September 2013)

Hi,
du musst von

```
.nav-tabs > li > a
```
padding-bottom und/oder padding-top ändern.

Kurze Frage, verwendest du Firebug oder Chrome DevTools?

Viele Grüße


----------



## StefanF195 (23. September 2013)

Hey, vielen Dank für deine Hilfreiche Antwort. Zu deiner frage: Nutze nichts davon, weil ich gar net wusste, dass es sowas gibt... Schreibe ganz normal im notepad und vrtualisierre über xaamp....
Hab gleich auch noch ne Frage: Ich hab auch noch ein Accordion eingebaut, wollte dort auch die Höhe ändern:

```
<div class="accordion" id="accordion-demo">
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage2">
								Test Your Page 
								<i class="icon-chevron-right"></i>
							</a>
							
						</div>

						<div id="viewpage2" class="accordion-body collapse">
							<div class="accordion-inner">
				
								<p id="text2">
									Naturally, the last thing you'll want to do is test your
									page with the accordion wizard. Once you've confirmed that
									it's working as expected, release it on the world. Your
									users will definitely appreciate the feedback and guidance
									it gives to multi-step and complex tasks on your web site.
								</p>
                
							</div> <!--/.accordion-inner -->
						</div>
					</div>
				</div>
```

Kannst du mir da auch weiterhelfen?

```
.accordion-heading > a {
padding-top:20px;
}
```
 geht nicht ?!

vielen Dank 

Stefan


----------



## Jan-Frederik Stieler (24. September 2013)

Hi,


> Schreibe ganz normal im notepad und vrtualisierre über xaamp....


Das ist auch in Ordnung. Aber verwende diese Tools um Fehler oder Stylings zu finden.
Hiermit kann man auch gut schnell ausprobieren was ein CSS-Attribut bewirkt und du siehst eben auch so abtrakte Sachen wie Vererbungen.
In wie fern wolltest du die Höhe ändern. Die der sich öffnenden Boxen oder der Titelbereiche?
Aber wenn du den Headerbereich vergößern willst brauchst musst du diese Klasse ändern

```
.accordion-heading .accordion-toggle
```
Gewöhne dir an eher über Klassen als über HTML-Elemente zu selektieren. Dann trennst du besser den Aufbau vom Layout.

Viele Grüße


----------



## StefanF195 (25. September 2013)

Hey, vielen Dank für deine tollen Hinweise. Nutze nun Firebug, ist echt sehr leicht damit die vererbung zu verstehen 
Ein Frage habe ich dennoch. Ich würde gerne, wenn das Accordion collapsed die Farbe vom icon ändern. Das müsste doch eigentlich auch über css lösbar sein oder ?
Ich hatte an sowas gedacht:

```
.accordion-heading .accordion-toggle.collapsed .icon-chevron-sign-right
```
Das funktioniert aber leider nicht ganz so richtig.
Hast du da ne Idee ?
Danke für deine Mühe

lieben Gruß

Stefan


----------



## Jan-Frederik Stieler (25. September 2013)

Hi,
hängt davon ab wie dein Accordion aufgebaut ist.
Falls die Klassenzuordnung in deinem Beitrag stimmt kannst du das über das css Attribut color machen.

Grüße


----------

