Как переопределить css заданный в Bootstrap для его элементов nav tabs?

Question

[Павел Теплянский]

Как переопределить css заданный в Bootstrap для его элементов nav tabs ?

Вот html в котором у меня не получается переопределить внешний вид табов:

<div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#register" aria-controls="register" role="tab" data-toggle="tab">Регистрация</a></li>
                            <li role="presentation"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Вход</a></li>
                            <li role="presentation"><a href="#guest" aria-controls="guest" role="tab" data-toggle="tab">Как гость</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="register">
                                <form>
                                    <div class="form-group">
                                        <label for="InputLogin">Логин: </label>
                                        <input type="text" class="form-control" id="InputNewLogin" placeholder="Логин">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputPassword">Пароль:</label>
                                        <input type="password" class="form-control" id="InputNewPassword" placeholder="Пароль">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputNewEmail">e-mail:</label>
                                        <input type="email" class="form-control" id="InputNewEmail" placeholder="e-mail">
                                    </div>
                                    <button type="submit" class="btn btn-default">ИГРАТЬ!</button>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="login">
                                <form>
                                    <div class="form-group">
                                        <label for="InputLogin">Логин: </label>
                                        <input type="text" class="form-control" id="InputLogin" placeholder="Логин">
                                    </div>
                                    <div class="form-group">
                                        <label for="InputPassword">Пароль:</label>
                                        <input type="password" class="form-control" id="InputPassword" placeholder="Пароль">
                                    </div>
                                    <a>Забыл пароль ?</a><br>
                                    <button type="submit" class="btn btn-default">ИГРАТЬ!</button>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane guest" id="guest">
                                <p>Войдя как гость, вы сможете поиграть в нашу игру, но вы будете лишены <a>ряда преимуществ.</a></p>
                                <p>Вы можете войти, <a>как гость</a> и посмотреть игру прямо сейчас!</p>
                                <p>А можете <a>зарегистрироваться</a> и играть с полными привелегиями.</p>
                                <a class="btn btn-default">Зарегистрироваться</a>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

Comments

[Billy Milligan]

Почему не получается? Как делали? Смотрели в bootstrap.css, помните про специфичность?

[Павел Теплянский]

Делал так:
.nav .nav-tabs li a{
color: white !important;
background-color: #0f0f0f !important;
}

Да и по другому пробовал. В бутсрап смотрел, но так и не понял где я ошибаюсь. Про специфичность даже не знаю, я только недавно начал осваивать вёрстку.

Answer 1

[Павел Теплянский]

Решил проблему созданиям отдельных классов для элементов дизайн которых нужно переопределить.