Html 从列右边距_Html_Css_Twitter Bootstrap

Html 从列右边距

html css twitter-bootstrap

Html 从列右边距,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我写过信，但我有一些问题首先，正如您在画笔中看到的，第二个菜单项是“活动”。由于某种原因，在钢笔里，而不是在我运行代码的时候，有一个灰色的背景。为什么会这样？我如何确保任何浏览器中都没有背景其次，正如您在html中看到的，我已将列设置为col-md-2和col-md-10，据我所知，col-md-2中的内容比col-md-10中的内容空间小，但总的来说，它们应该占整个浏览器窗口的大小尽管如此，col-md-10的内容似乎比实际存在的空间要小，正如所见（笔中还有一个未显示在我的浏览器中的

我写过信，但我有一些问题

首先，正如您在画笔中看到的，第二个菜单项是“活动”。由于某种原因，在钢笔里，而不是在我运行代码的时候，有一个灰色的背景。为什么会这样？我如何确保任何浏览器中都没有背景

其次，正如您在html中看到的，我已将列设置为

col-md-2

和

col-md-10

，据我所知，

col-md-2

中的内容比

col-md-10

中的内容空间小，但总的来说，它们应该占整个浏览器窗口的大小

尽管如此，

col-md-10

的内容似乎比实际存在的空间要小，正如所见

（笔中还有一个未显示在我的浏览器中的空白）

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>

活动菜单项的背景为灰色的原因是，codepen中的CSS在引导CSS之前加载，因此您尝试设置背景颜色的CSS为：透明；不会优先于引导CSS。可能是同样的原因留下了空白

col-md-10将div的宽度设置为83.33333%（10/12）。与83.333%的父div相同，父div是一个具有设置像素宽度的容器。如果将.container类更改为.container流体，它将完全消失，因为.container流体的宽度为100%

您需要在此处提供显示问题的最小相关代码。第三方网站明天可能会消失，将来对任何人都没有帮助。你是对的，我补充道。非常感谢。

/* 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;
    }