Question

我正在尝试在我的导航栏中的导航栏中执行自定义按钮样式，但它采用了导航栏的默认样式。我想要做的是在导航栏中制作两个按钮，说明注册和登录。我希望它们与其他菜单项一致，但要成为＆＃34;按钮＆＃34;有没有背景的边框。然而它们出现了btn-primary着色。

这是我正在使用的代码：

.btn.outline {
    background: none !important;
    padding: 12px 12px;
}

.btn-primary.outline {
    border: 2px solid #0099cc;
    color: #0099cc;
}

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #33a6cc;
    border-color: #33a6cc;
}

.btn-primary.outline:active, .btn-primary.outline.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

我打电话给它：

<li>
    <p class="navbar-btn">
        <a href="{{ URL::route('register') }}" class="btn btn-primary outline">Sign Up</a>
    </p>
</li>

任何人都可以发现我正在做或丢失的事情导致它忽略我的CSS吗？

谢谢！

编辑：我使用！important希望它会覆盖bootstrap.css

再次编辑：这是我的导航栏代码：

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#home"><img src="Landing/img/logo3.png" class="img-responsive2"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav pull-right mainnav">
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                    <li>
                        <p class="navbar-btn">
                            <a href="{{ URL::route('register') }}" class="btn btn-primary outline">Sign Up</a>
                        </p>
                    </li>
                    <li>
                        <p class="navbar-btn">
                            <a href="{{ URL::route('login') }}">Login</a>
                        </p>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

看起来它对我使用BS 3.3.4。

我从BS网站上抓取了默认的导航栏代码并将其放入其中。 Check this fiddle - 这是一个没有背景和蓝色边框的按钮。

也许你有些事情在错误的地方？

<style>
    .btn.outline {
        background: none !important;
        padding: 12px 12px;
    }

    .btn-primary.outline {
        border: 2px solid #0099cc;
        color: #0099cc;
    }

    .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
        color: #33a6cc;
        border-color: #33a6cc;
    }

    .btn-primary.outline:active, .btn-primary.outline.active {
        border-color: #007299;
        color: #007299;
        box-shadow: none;
    }
    </style>

<nav class="navbar navbar-default">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="{{ URL::route('register') }}" class="btn btn-primary outline">Sign Up</a>
                </p>
            </li>
        </ul>
        </div>
    </div>
</nav>

为什么我的按钮样式没有改变？

1 个答案: