右側大空白屏幕尺寸767px及以下Bootstrap響應

Question

我在引導響應屏幕尺寸方面遇到了一些問題，由於某些原因，當窗口小於767px時，右側大約有30px或更大的填充，而我不知道如何清除它。 如果屏幕尺寸較小，則右側尺寸的白色條會較大。 你能幫我一下嗎？ 這是文件的鏈接

這是Bootstrap.sensitive的屏幕截圖

@media(max-width:767px) {
  body {
    padding-right: 20px;
    padding-left: 20px;
  }
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin-right: -20px;
    margin-left: -20px;
  }
  .container-fluid {
    padding: 0
  }
  .dl-horizontal dt {
    float: none;
    width: auto;
    clear: none;
    text-align: left
  }
  .dl-horizontal dd {
    margin-left: 0
  }
  .container {
    width: auto
  }
  .row-fluid {
    width: 100%
  }
  .row,
  .thumbnails {
    margin-left: 0
  }
  .thumbnails>li {
    float: none;
    margin-left: 0
  }
  [class*="span"],
  .uneditable-input[class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }
  .span12,
  .row-fluid .span12 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }
  .row-fluid [class*="offset"]:first-child {
    margin-left: 0
  }
  .input-large,
  .input-xlarge,
  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }
  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto
  }
  .controls-row [class*="span"]+[class*="span"] {
    margin-left: 0
  }
  .modal {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0
  }
  .modal.fade {
    top: -100px
  }
  .modal.fade.in {
    top: 20px
  }
}

@media(max-width:480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0)
  }
  .page-header h1 small {
    display: block;
    line-height: 20px
  }
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc
  }
  .form-horizontal .control-label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left
  }
  .form-horizontal .controls {
    margin-left: 0
  }
  .form-horizontal .control-list {
    padding-top: 0
  }
  .form-horizontal .form-actions {
    padding-right: 10px;
    padding-left: 10px
  }
  .media .pull-left,
  .media .pull-right {
    display: block;
    float: none;
    margin-bottom: 10px
  }
  .media-object {
    margin-right: 0;
    margin-left: 0
  }
  .modal {
    top: 10px;
    right: 10px;
    left: 10px
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px
  }
  .carousel-caption {
    position: static
  }
}

的main.css

 @import url(http://fonts.googleapis.com/css?family=Fjalla+One); .clearfix{*zoom:1} .clearfix:before, .clearfix:after{ display:table; content:""; line-height:0 } .clearfix:after{ clear:both } .hide-text{ font:0/0 a; color:transparent; text-shadow:none; background-color:transparent; border:0 } .input-block-level{ display:block; width:100%; min-height:30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } body{ padding-top:80px; font-size:12px; color:#34495e; background:#f5f5f5 width:100%; } body h1,body h2,body h3,body h4,body .created{ font-family:"Fjalla One"; font-weight:normal } body h5{margin:0} body h3,body h4{margin-top:0} body h6{margin:0;font-family:"roboto_thregular"; font-size: "24px"} body .btn{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:0; background-image:none; text-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none } .btn.btn-transparent{ border:3px solid #fff; background:transparent; color:#fff } .btn.btn-transparent:hover{ border-color:rgba(255,255,255,0.5)} .btn.btn-link{color:#bb0300;padding:0} .btn.btn-link:hover{text-decoration:none} .btn-primary{background-color:#bb0300} .btn-primary:hover{background-color:#ff0200} a{color:#bb0300;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms} a:hover, a:focus{color:#ff0200;text-decoration:none;outline:0} .dropdown-menu{margin-top:-1px;min-width:180px; color:#bb0300 } body>section{padding:5px 0} body>section #slide-show{padding:0} #recent-works{background:#bb0300;color:#fff} #recent-works .links>a{background:#fff;color:#bb0300;text-shadow:none} #clients{background:#fff} #clients h4{color:#999} #clients .carousel{margin-bottom:0} #clients .clients ul.thumbnails{margin:0} #clients .clients ul.thumbnails>li{text-align:center;margin-bottom:0} #clients .prev, #clients .next{color:#999} .title{background:#bb0000;color:#fff;padding:20px 0} .center{text-align:center} .box{ background-color:#fff; border-top:1px solid #f0f0f0; -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } .progress{margin-bottom:10px} .progress,.progress .bar{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; background-image:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; text-shadow:none; height:30px; line-height:30px } .label,.badge{font-weight:300;font-size:90%} ul.breadcrumb{margin:12px 0 0;background:transparent} ul.breadcrumb>li{text-shadow:none} ul.breadcrumb>li>a,ul.breadcrumb>li .divider{color:#fff} ul.breadcrumb>li.active{color:rgba(255,255,255,0.7)} ul.tag-cloud li{display:inline-block;margin:0 0 2px 0} .btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)} .btn-social.btn-facebook{background:#4f7dd4} .btn-social.btn-facebook:hover{background:#789bde} .btn-social.btn-twitter{background:#5bceff} .btn-social.btn-twitter:hover{background:#8eddff} .btn-social.btn-linkedin{background:#21a6d8} .btn-social.btn-linkedin:hover{background:#49b9e3} .btn-social.btn-google-plus{background:#dc422b} .btn-social.btn-google-plus:hover{background:#e36957} .btn-social:hover{color:#fff} header.navbar .navbar-inner{ background:#fff!important; border:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none } header #logo{ width:435px; height:80px; background:url(../images/logo/trlogo.png) no-repeat 0 50% } header.navbar{ margin-bottom:0 } header.navbar .nav{ margin-top:20px} header.navbar .nav>li{margin-left:1px} header.navbar .nav>li>a{ padding-top:10px; padding-bottom:10px; color:#333; font-family:"Fjalla One"; font-size:14px; text-transform:uppercase; text-shadow:none } header.navbar .nav>li>a:hover{ background:transparent; color:#bb0300; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none } header.navbar .nav>li.active>a,header.navbar .nav>li.active>a:hover{ background:transparent; color:#bb0300; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none } header.navbar .nav>li.dropdown.open>a.dropdown-toggle{ background:transparent; color:#bb0300 } header.navbar .nav>li.login>a{ border-left:1px solid #e5e5e5 } header .dropdown-menu{margin-top:20px; color:#bb0300 } header .dropdown-menu:before{display:none!important} .navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{ background-color:transparent; color:#bb0300 } .navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{ -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none } .navbar .nav>li>a:focus,.navbar .nav>li>a:hover{color:#bb0300} .dropdown-menu{-webkit-border-radius:0;-moz-border-radius:0; border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:0;border:0} .dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{ background:#bb0300 } .main-info{ background-color:#fff; color:#3a3a3a }.main-info h4{ color:#706f6f } .icon-medium{ font-size:18px; width:18px; line-height:18px; text-align:center; display:inline-block; background:#db2323; padding:10px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; color:#fff } .modal{border:0} .modal#loginForm{width:600px;margin-left:-300px} .modal .modal-header{border:0;padding:20px 20px 0} .modal .modal-header>h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0} .modal .modal-body{padding:20px} .modal input[type="text"],.modal input[type="password"]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px} .modal .icon-remove{ color:#848484; position:absolute; right:-5px; top:-5px; width:16px; height:16px; line-height:16px; text-align:center; display:block; background:#ebebeb; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; cursor:pointer } .modal button{margin-left:10px;border:0} .gap{margin-bottom:50px} .big-gap{margin-bottom:100px} .no-margin{margin:0;padding:0} #services{background:#252525;color:#999} #services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff} #main-contents{margin-top:20px} #main-contents .blog-news .created{font-size:18px;color:#2dcc70} .registration-form{ border:0; background-color:#fff; border-top:1px solid #f0f0f0; -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); padding:20px; display:inline-block}#bottom{background:#000000; color:#6f6f6f } #bottom h4{margin-top:0;margin-bottom:15px} #bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff} #bottom a{color:#6f6f6f} #bottom a:hover{color:#2dcc70} #bottom ul.address>li{position:relative;padding-left:20px;margin-top:10px} #bottom ul.address>li:first-child{margin-top:0} #bottom ul.address>li>i{position:absolute;top:3px;left:0} #bottom ul.thumbnails{margin-bottom:0} #bottom ul.thumbnails li{ margin-bottom:5px; } ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{ list-style:none;padding:0;margin:0; } ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after{ font-family:FontAwesome; font-size:11px; } ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before{margin-right:5px} ul.arrow li::before{content:"\\f105"} ul.arrow-double li::before{content:"\\f101"} ul.tick li::before{content:"\\f00c"} ul.cross li::before{content:"\\f00d"} ul.star li::before{content:"\\f006"} ul.rss li::before{content:"\\f09e"} #footer{ background:#333; padding-top:15px; padding-bottom:15px; color:#666; } #footer a{color:#666} #footer a:hover{color:#ef0909} #footer #gototop{height:40px; line-height:40px; width:40px; text-align:center; display:inline-block; background:#1d1d1d; font-size:24px; color:#fff; } #footer #gototop:hover{ background:#bb0000; text-decoration:none; } #footer .cp{ margin-top:11px; } ul.social{ list-style:none; margin:10px 0 0; padding:0; display:inline-block; } ul.social>li{ display:inline-block; margin:0 5px; } ul.social>li>a{ font-size:24px; color:#666; } ul.social>li>a:hover{ color:#999; }.box-border{ padding:15px; }.accordion-group{ background-color:#fff; border-top:1px solid #f0f0f0; }.accordion-heading .accordion-toggle{ color:#666; font-weight:700; } .accordion-inner{border-top:0} .blog .blog-item h2{margin-top:0} .blog .blog-item .date span{display:block;text-align:center} .blog .blog-item .date span.day{ font-size:50px; line-height:50px; padding-top:10px; font-family:"Fjalla One",sans-serif; } .blog .blog-item .date span.month{font-size:18px} .blog .blog-item .tag{margin-top:5px} .blog .blog-item .avatar{margin-top:5px} select,textarea,input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; min-height:50px; padding:0 15px; border:3px solid #ededed } select:focus,textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus{ border-color:#2dcc70; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } .input-block-level{ min-height:50px; } textarea#message{ padding:10px 15px; height:305px; } .widget{ margin-bottom:30px; } .widget>h3{ font-size:16px; margin-top:0; } .widget h5{ margin-top:10px; }.widget .date{ margin-top:5px; padding:8px 10px; background:#2dcc70; }.widget .date>span{ display:block; text-align:center; font-family:"Fjalla One"; color:#fff; }.widget .date>span.month{ font-size:14px; line-height:14px; font-weight:700; text-transform:uppercase; }.widget .date>span.day{ font-size:18px; line-height:18px; }#pricing-table{ margin-top:20px; margin-bottom:30px; }#pricing-table .plan{ list-style:none; margin:0; padding:0; color:#fff; }#pricing-table .plan.featured{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } #pricing-table .plan>li{padding:10px 15px} #pricing-table .plan>li.plan-name{background:rgba(0,0,0,0.1)} #pricing-table .plan>li.plan-name h3{margin:10px 0} #pricing-table .plan>li.plan-action{padding:20px 0} #pricing-table .plan1{background:#1abc9c} #pricing-table .plan2{background:#e74c3c} #pricing-table .plan3{background:#3498db} #pricing-table .plan4{background:#9b59b6} ul.gallery{display:block;margin:-15px} ul.gallery.col-1 li{width:100%} ul.gallery.col-2 li{width:50%} ul.gallery.col-3 li{width:33.3333%} ul.gallery.col-4 li{width:25%} ul.gallery li{display:block;padding:0;margin:0;float:left} ul.gallery li .desc{margin:15px} ul.gallery li .preview{margin:15px;display:block;position:relative} ul.gallery li .preview .overlay{ width:100%; height:100%; position:absolute; left:0;top:0; background:rgba(0,0,0,0.6); opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; } ul.gallery li .preview modal-bodyinks{ width:104px; height:40px; position:absolute; top:50%; left:50%; margin-top:-20px; margin-left:-52px; opacity:0; filter:alpha(opacity=0); -webkit-transform:translate(0,-50px); -moz-transform:translate(0,-50px); -ms-transform:translate(0,-50px); -o-transform:translate(0,-50px); transform:translate(0,-50px); -webkit-transition:300ms; -moz-transition:300ms; -o-transition:300ms; transition:300ms } ul.gallery li .preview .links>a{ width:50px; height:40px; line-height:40px; display:inline-block; text-align:center; background:#2dcc70; color:#fff; text-shadow:0 1px rgba(0,0,0,0.3); font-size:18px; margin:0 1px; } ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{ opacity:1; filter:alpha(opacity=100) } ul.gallery li .preview:hover .links{ -webkit-transform:translate(0,0); -moz-transform:translate(0,0); -ms-transform:translate(0,0); -o-transform:translate(0,0); transform:translate(0,0); } ul.faq{ list-style:none; margin:0; } ul.faq li{ margin-top:30px; } ul.faq li:first-child{margin-top:0} ul.faq li span.number{ display:block; float:left; width:50px; height:50px; line-height:50px; text-align:center; background:#bb0300; color:#fff;font-size:24px; }ul.faq li>div{margin-left:70px}ul.faq li>div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px} #mapSection, #carouselSection{border-top:0px solid #BB0000; border-bottom: 0px; background: #bb0300; color:#fff} .container1{width:1170px; margin-right:0px; } .input-block-level1{ display:block; width:100%; min-height:30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .input-block-level1{min-height:50px}textarea#message1 { padding:10px 15px; height:220px} 

Answer 1

該代碼段不起作用-您需要添加html以幫助調試此特定情況。

但是，解決此問題的關鍵（以及其他類似問題-如果您使用HTML / CSS的話，它們會一直出現）將是學習如何自行調試HTML / CSS的最佳方法是了解如何在Chrome中將“檢查元素”或“ Firefox開發者瀏覽器”與Firefox或“ chrome-devtools”結合使用。 一些幫助的文章：

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector