Question

我想要我的头文＆＃34; PCT研究＆＃34;在中心。

以下是我要使用的代码：

@media (min-width: 768px)
.navbar-header {
     float: none;
}

但它来自在线引导程序，其在线是：float: right;。我想要覆盖它。如何通过在线链接bootstrap来实现？

要查看此处导航的完整视图，请链接： http://codepen.io/Rehman/pen/vOwmNy

Answer 1

要覆盖此类引导元素，您应该使用!important，如下所示：

@media (min-width: 768px){
  .navbar-header {
    float: none !important;
  }
}

实际上，只要您不忘记{ }到@media声明，就可以在笔中执行此操作。

您可以在 CSS Trick 上的 Chris Coyier 的精彩文章中找到有关!important的更多信息：When Using !important is The Right Choice。

修改

考虑到 @ APAD1 的评论并作为答案的补充，以正确的顺序调用CSS文件是解决问题的更好方法，在这种情况下至少。所以先调用 Bootstrap CSS ，然后调用自己的自定义CSS 。

在 Codepen 方式中，这意味着在 CSS窗口的属性中加载“添加外部CSS ”的Bootstrap CSS，而不是在HTML中加载它。

Answer 2

你必须像这样使用'！important'：

 .navbar-header {
        float: none !important;
  }

这将覆盖该类。然而，这是一个快速的方式，可能会变得混乱。另一种方法是在bootstrap css之后调用自定义css

Answer 3

要将其集中在所有设备上，您必须使用具有较大最大宽度的媒体查询，如此。在codepen上查看。你可以搞乱最大宽度

@media only screen and (max-width:1600px) {.navbar-brand {
  float: none!important;
  width: 200px;
  display: table-cell;
  text-align: center;
}

.navbar-header {
  float: none!important;
}
}

段：

＆＃13;

.navbar-collapse ul{
    margin-right: 3px;
    text-align: center;
    margin-top: 17px;
}



.navbar-header {

    width: 0%;
    margin: 0 auto;
    display: table;
}
@media only screen and (max-width:1600px) {.navbar-brand {
  float: none!important;
  width: 200px;
  display: table-cell;
  text-align: center;
}

.navbar-header {
  float: none!important;
}
}

＆＃13;

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Research Group</title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!--[if lt IE 9]>
    <script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div id="menu" class="col-md">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <!-- The Logo button & menu toggle button-->
                <divc class="row">
                    <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">PCT Research group</a>
                    </div>
                </divc>
                <!--End button & logo -->
                <div class="row">
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-home"></span> Home</a>
                                &nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-globe"></span> Research</a>
                                &nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="publications.html" target="_self"><span class="glyphicon glyphicon-list-alt"></span>
                                    Publications</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="projects.html" target="_self"><span class="glyphicon glyphicon-book"></span> Projects</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="News.html" target="_self"><span class="glyphicon glyphicon-calendar"></span>Events</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="Events.html" target="_self"><span class="glyphicon glyphicon-calendar"></span>
                                News</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="Profiles_View.html" target="_self"><span class="glyphicon glyphicon-user"></span> Knowledge
                                    Power </a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-alt"></span> About
                                    Us</a>
                            </li>
                        </ul>
                    </div>
                    </div>
            </nav>
        </div>
    </div>
    </div>
</body>

＆＃13;

Bootstrap导航栏文本

3 个答案: