부트 스트랩 3에서이 수평 스크롤바를 제거하는 방법

부트 스트랩 페이지에서 가로 스크롤이 발생했습니다. 무엇이 이처럼 행동하게 만들지 또는 무엇을해야 할지를 알 수 없습니까?부트 스트랩 3에서이 수평 스크롤바를 제거하는 방법

JsFiddle 링크 : http://jsfiddle.net/FatAlbert/cd1syrd9/2/

HTML :

<body> 
    <div class="wrapper"> 
     <div class="row"> 
      <div class="header"> 
       <div class="container"> 
        <!-- navigation--> 
         <nav class="navbar navbar-default"> 
          <div class="container-fluid"> 

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button> 
           <a class="navbar-brand" href="#"><img src="xxx" /></a> 

           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
            <ul class="nav navbar-nav"> 
             <li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
            </ul> 
           </div> 
          </div> 
         </nav><!--/navigation--> 
       </div> 
      </div><!--/header--> 
     </div><!--/container--> 
     <div class="row"> 
      <div class="first-page-content"> 
       <div class="container"> 
         <img class="img-responsive img-big" src="xx" /> 
         <p> 
          Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam. 
         </p> 

       </div> 
      </div> 
     </div><!--/first-content--> 
    </div> 
    <div class="footer"> 
     <div class="container"> 
      <p class="pull-right"> 
       Some<br /> 
       Info<br /> 
      </p> 
     </div> 

    </div><!-- /footer--> 

</body>

CSS :

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin-bottom: 160px; 
} 

h1 { 
    font-size: 2.5em; 
} 

h2 { 
    font-size: 1.5em; 
} 

p { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1.05em; 
    line-height: 1.8; 
    text-align: justify; 
} 

a { 
    color: #0071BB; 
    font-weight: bold; 
} 

.wrapper { 
} 

.footer { 
    position: absolute; 
    padding-top: 25px; 
    bottom: 0; 
    width: 100%; 
     /* Set the fixed height of the footer here */ 
    height: 160px; 
    background-color: #5FC8FF; 
} 

.header .glyphicon-wrench { 
    margin: 0 3px; 
} 

.header h4 { 
    margin-right: 3px; 
} 

.img-responsive { 
    display: block; 
    margin: auto; 
} 

.img-responsive.img-big { 
    margin-top: 75px; 
} 

.navbar { 
    border: none; 
} 

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

.navbar-default .navbar-nav > li { 
    width: 150px; 
    margin-right: 2px; 
} 

.navbar-default .navbar-nav > li > a, 
    .navbar-default .navbar-nav > li > a:hover { 
    color: #fff; 
    font-weight: bold; 
    background-color: #92C7E1; 
} 

.navbar-default .navbar-nav > li > a:hover { 
    background-color: #98CEE5; 
} 

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #fff; 
    background-color: #98CEE5; 
} 

a.navbar-brand { 
    padding: 5px; 
} 

.row { 
} 

.alert { 
} 

.well { 
} 

.footer p { 
    font-weight: bold; 
    color: #FDFDFB; 
} 

@media (min-width: 992px) { 
} 

@media (min-width: 768px) { 

    .first-page-content p { 
     margin: 75px auto 25px auto; 
     width: 524px; 
    } 
}

출처

2015-01-03 FatAlbert

당신이 가로 스크롤을 의미합니까? 수직 스크롤은 내용이 가로 방향 – jmore009

가로로 지나갈 때 나타날 것입니다 - 예. tnx @ jmore009 – FatAlbert

내 의견을 참조하십시오. CSS에이 코드를 추가하면 가로 스크롤 막대가 완전히 비활성화됩니다. – vasanth

으로 Bootstrap 3 documentation 당 :

적절한 정렬 및 패딩을 위해 .container (고정 너비) 또는 .container-fluid (전체 너비)에 행을 배치해야합니다.

따라서 .wrapper 요소에 container 클래스를 추가하십시오. 설명에 관해서

<div class="wrapper container"> 
    <div class="row"> 
     ... 
    </div> 
</div>

Updated Example

상기 .row 클래스 양쪽 -15px 마진을 갖는다. 또한

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
}

Bootstrap 3 docs를 읽고, 나는 기사 "The Subtle Magic Behind Why the Bootstrap 3 Grid Works"을 읽어 좋을 것 :

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
}

.container 클래스는 효과적으로 다음과 같이하는 것이 변위.

출처

2015-01-03 19:06:59

고마워요! 당신은 또한 작동하지 않는 끈적한 풋터 문제를 해결했습니다. – FatAlbert

대단히 감사합니다 !!! 행은 적절한 정렬 및 패딩을 위해 .container (고정 너비) 또는 .container-fluid (전체 너비) 내에 있어야합니다. – victorkurauchi

필자의 경우 작은 장치에서 너비가 고정되어 있으므로 .container를 사용할 수 없습니다. 나는 .container-fluid로 이것을 고친다. –

이 코드를 CSS에 복사하면 가로 스크롤 막대가 비활성화됩니다.

body {overflow-x: hidden;}

출처

2015-10-26 07:25:23 vasanth

+14

그러면 브라우저 스크롤 막대가 숨겨집니다. 그.행 요소가 여전히 범위를 벗어나므로 대부분의 모바일 장치에 문제가 있습니다. –

문제는 기본적으로 .container가 없기 때문에 발생합니다. 해결 방법은 .no-container 클래스를 행에 추가하고 여백 : 0을 추가하여 행 클래스의 음수 여백을 보완 할 수 있다는 것입니다.

는 CSS와 HTML 마크 업 코드 아래 참조 :

.no-container { 
 
    margin-left: 0 !important; 
 
    margin-right: 0 !important; 
 
} 
 
.row { 
 
    border: 1px solid #999; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!--<div class="container"> Container is commented --> 
 
<div class="row no-container"> 
 
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div> 
 
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div> 
 
</div> 
 
<!--</div> Container ends here -->

출처

2016-10-04 09:05:44

부트 스트랩 3에서이 수평 스크롤바를 제거하는 방법

답변

관련 문제