Question

我写过this code，但我有一些问题和疑问。

首先，正如您在Pen中看到的那样，第二个菜单项是“活动的”。出于某些原因，仅在Pen中，而不是在my browser中运行代码时，存在灰色背景。为什么这样，我怎么能确定任何浏览器都没有背景？

其次，正如您在html中看到的那样，我已将列设置为col-md-2和col-md-10，据我了解，col-md-2中的内容所占用的空间少于col-md-10但总的来说，它们应该加起来整个浏览器的窗口大小。

col-md-10的内容虽然表现得比实际存在的空间少，但可以看作here。

（在笔中还留有一个未在我的浏览器中显示的边距）

HTML

<body>
<div class="container">
            <div class="row">
                <div class="col-md-2" >
                  <div class="sidebar-nav">
                    <div class="navbar navbar-default" role="navigation" id = "verticalMenu">
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Menu</span>
                      </div>                      
                      <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav" id = "menuItems">

                          <li><a href="#">Menu Item 1</a></li>
                          <li class="active"><a href="#">Menu Item 2</a></li>
                          <li><a href="#">Menu Item 3</a></li>
                          <li><a href="#">Menu Item 4</a></li>

                        </ul>
                      </div><!--/.nav-collapse -->                    
                    </div>
                  </div>
                </div>              
                <div class="col-md-10" id = "myContent">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet rhoncus dui, vel tempor purus. Proin eu gravida elit. Donec nisi sapien, ultricies elementum justo in, ultricies semper nisi. </p>
                </div>
          </div>
      </div>
    </body>

CSS

/* make sidebar nav vertical */ 
    @media (min-width: 768px) 
    {
      .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
      }
      .sidebar-nav .navbar ul {
        float: none;
      }
      .sidebar-nav .navbar ul:not {
        display: block;
      }
      .sidebar-nav .navbar li {
        float: none;
        display: block;
      }
      .sidebar-nav .navbar li a {
        padding-top: 12px;
        padding-bottom: 12px;
      }
    }

    .container
    {
        margin: 0px;
    }

    #myContent
    {
        margin-top: 25%;
    }

    #verticalMenu
    {
        margin-top: 50%;
        background-color: transparent;
        border: none;
    }

    #menuItems a
    {
        color: black;   
    }

    #menuItems a:hover
    {
        color: red;
        background-color: white;        
    }

    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
    {
        background-color: transparent;
        border-right: 3px solid black;
    }

    .navbar-default .navbar-nav>li>a
    {
        border-right: 3px solid red;
        background-color: white;
        text-align: right;
    }

    .navbar-default .navbar-toggle
    {
        border: 2px solid red;
        border-color: red;
    }

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
    {
        background-color: transparent;
    }

Answer 1

活动菜单项的背景为灰色的原因是因为codepen中的CSS是在bootstrap CSS之前加载的，因此是你尝试设置background-color的CSS：transparent;不会优先于bootstrap CSS。边际左边的原因可能相同。
col-md-10将div的宽度设置为83.33333％（10/12）。与其父div中的83.333％一样，这是一个具有设置像素宽度的容器。如果您将类.container更改为.container-fluid，它将完全退出，因为.container-fluid的宽度为100％。

保证金 - 从列开始

1 个答案: