बूटस्ट्रैप 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>

सीएसएस:

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

मेरी टिप्पणी देखें, बस इस कोड को अपने सीएसएस में जोड़ें, यह आपकी क्षैतिज स्क्रॉल बार को पूरी तरह अक्षम कर देगा। – vasanth

के अनुसार Bootstrap 3 documentation:

पंक्तियों को उचित संरेखण और पैडिंग के लिए .container (निश्चित-चौड़ाई) या .container-fluid (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए।

इसलिए, container कक्षा .wrapper तत्व में जोड़ें।

Updated Example

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

एक स्पष्टीकरण के लिए के रूप में, .row वर्ग हर तरफ -15px मार्जिन है।

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

.container वर्ग प्रभावी रूप से विस्थापित कि निम्नलिखित के साथ:

.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" पढ़ने का सुझाव चाहते हैं।

स्रोत

2015-01-03 19:06:59

धन्यवाद! आपने मेरी चिपचिपा पादरी समस्या भी हल की जो कि काम नहीं करता था। – FatAlbert

बहुत बहुत धन्यवाद !!! पंक्तियों को उचित संरेखण और पैडिंग के लिए। कंटेनर (निश्चित-चौड़ाई) या। कंटेनर-तरल पदार्थ (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए। – victorkurauchi

मेरे मामले में, मैं .container का उपयोग नहीं कर सका क्योंकि यह छोटे उपकरणों पर चौड़ाई तय कर चुका है। मैं इसे कंटेनर-तरल पदार्थ के साथ ठीक करता हूं। –

बस इस कोड को अपने सीएसएस पर कॉपी करें, यह आपके क्षैतिज स्क्रॉल बार को अक्षम कर देगा।

body {overflow-x: hidden;}

स्रोत

2015-10-26 07:25:23 vasanth

+14

यह ब्राउज़र स्क्रॉल बार को छुपाएगा। द।पंक्ति तत्व अभी भी सीमा से बाहर होगा और आपको अधिकांश मोबाइल उपकरणों में समस्या होगी। –

मुद्दा मूल रूप से माता-पिता के कारण होता है। कंटेनर गुम है। समाधान यह है कि आप पंक्ति में एक .no-कंटेनर कक्षा जोड़ सकते हैं और पंक्ति वर्ग के नकारात्मक मार्जिन की क्षतिपूर्ति के लिए मार्जिन: 0 जोड़ सकते हैं।

सीएसएस और 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

उत्तर

संबंधित मुद्दे