오른쪽에서 여백 - 오른쪽

나는 this code로 편지를 쓰긴했지만 약간의 문제점과 질문이 있습니다.오른쪽에서 여백 - 오른쪽

펜에서 볼 수 있듯이 두 번째 메뉴 항목은 "활성"입니다. 웬만한 이유만으로 펜을 사용하지 않고 코드를 실행할 때 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; 
    }

출처

2016-06-17 s.vlassis

여기에 문제를 나타내는 최소한의 관련 코드를 제공해야합니다. 제 3 자 사이트는 내일 사라져 미래에 아무도 도움을받을 수 없습니다. – Rob

당신 말이 맞아요, 나는 그것을 추가했습니다. 고맙습니다 –

이유는 backgrou 활성화 된 메뉴 항목은 회색입니다. 왜냐하면 코드 in의 CSS가 부트 스트랩 CSS 앞에로드되어 있기 때문에 배경색을 설정하려고하는 CSS가 투명하기 때문입니다. 부트 스트랩 CSS보다 우선 순위가 결정되지 않습니다. 아마도 마진과 같은 이유가 남아있을 것입니다.
col-md-10은 div의 너비를 83.33333 % (10/12)로 설정합니다. 부모 div의 83.333 % 에서처럼 픽셀 너비가 설정된 컨테이너입니다. 클래스 .container를 .container-fluid로 변경하면 .container-fluid의 너비가 100 %이기 때문에 대신 모든 방법이 사용됩니다.

출처

2016-06-18 02:30:31 torus

오른쪽에서 여백 - 오른쪽

답변

관련 문제