Question

对于我的个人/专业网站：

我正在使用Bootstrap 3 CDN，问题是我在导航栏的右侧添加了徽标；默认的Bootstrap设置包括“ margin-left和margin-right设置为0”。我注意到这会导致徽标元素“图片右侧的最后一个元素”在打算沿着导航栏和其他导航栏项目左侧的一行放置时折叠。使用Chrome Devtools时，我注意到margin-left:0是造成位移的原因。

我的问题是：如何正确覆盖Bootstrap 3的样式，包括->如何取消选择margin-right:0并将其设置为none;？

 @media (min-width: 768px)
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
    }





<!-- begin snippet: js hide: false console: true babel: false -->

 <!-- language: lang-html -->

          <!-- begin snippet: js hide: false console: true babel: false -->

          <!-- language: lang-html -->

                <link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384- 
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">
                  <link rel="stylesheet" type="text/css" href="app.css">
              </head>
              <body>
                      <nav class="navbar navbar-inverse">
                              <div class="container" >
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <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="#"><i id="errorbug" class="fas fa-bug"></i><i id="coffeecup" class="fas fa-coffee"></i>Shamari Hankins</a>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                  <ul class="nav navbar-nav">
                                    <li><a href="">About</a></li>
                                    <li><a href="">Contact</a></li>
                          <li><a href="">Development</a></li>


                                  </ul>

                                  <ul class="nav navbar-nav navbar-right"> <!-- Right of the NavBar -->
                                    <img  class="shadowProjectsImg "src="sp.jpg">
                          <li><a href="#">Artwork</a></li>
                          <li><a href="#">Sign up</a></li>
                                      <li><a href="#">Login</a></li>
                                  </ul>`enter code here`
                                </div><!-- /.navbar-collapse -->
                              </div><!-- /.container-fluid -->
                      </nav> <!-- begin snippet: js hide: false console: true babel: false -->

 <!-- language: lang-html -->

          <!-- begin snippet: js hide: false console: true babel: false -->

          <!-- language: lang-html -->

                <link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384- 
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">
                  <link rel="stylesheet" type="text/css" href="app.css">
              </head>
              <body>
                      <nav class="navbar navbar-inverse">
                              <div class="container" >
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <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="#"><i id="errorbug" class="fas fa-bug"></i><i id="coffeecup" class="fas fa-coffee"></i>Shamari Hankins</a>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                  <ul class="nav navbar-nav">
                                    <li><a href="">About</a></li>
                                    <li><a href="">Contact</a></li>
                          <li><a href="">Development</a></li>


                                  </ul>

                                  <ul class="nav navbar-nav navbar-right"> <!-- Right of the NavBar -->
                                    <img  class="shadowProjectsImg "src="sp.jpg">
                          <li><a href="#">Artwork</a></li>
                          <li><a href="#">Sign up</a></li>
                                      <li><a href="#">Login</a></li>
                                  </ul>`enter code here`
                                </div><!-- /.navbar-collapse -->
                              </div><!-- /.container-fluid -->
                      </nav>

引导导航栏保证金问题：

Answer 1

要覆盖Bootstrap中的所有内容，只要在引导程序之后调用CSS，它就应该只是调用该类并分配您想要的属性，即

.someClass {
    attribute-to-change: changedValue;
}

如何覆盖Bootstrap 3导航栏边距类

1 个答案: