Bootstrap組件適合屏幕

Question

我正在使用bootsrap 3.3.7，我試圖讓bootstrap適合屏幕，但我失敗了。我在互聯網上搜索並嘗試但不工作。

這是圖片

我唯一的成功，使導航欄適合屏幕，而不是旋轉木馬等。

這是我的代碼

<?php get_header();?> 

<br> 

     <div id="Carousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="Carousel" data-slide-to="1"></li> 
      <li data-target="Carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg"> 
       <div class="carousel-caption"> 
        <h3>This is Title 1</h3> 
        <p>Some Description</p> 
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg"> 
       <div class="carousel-caption"> 
        <h3>This is Title 2</h3> 
        <p>Some Description</p> 
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg"> 
       <div class="carousel-caption"> 
        <h3>This is Title 3</h3> 
        <p>Some Description</p> 
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
       </div> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#Carousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

    <br> 
    <br> 
    <br> 

    <div class="jumbotron"> 
     <h1>Hello, world!</h1> 
     <p>Some Description XD</p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
    </div> 


    <br> 
    <br> 


    <div class="row featurette"> 
     <div class="col-md-7" > 
     <h2 class="featurette-heading"> First featurette heading.<span class="text-muted"> It'll blow your mind. </span> </h1> 
     <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p> 
     </div> 

     <div class="col-md-5" style="padding-top: 28px;"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found" class="img-thumbnail" style="width: auto; height: auto" ></div> 
    </div> 

    <br> 
    <br> 

    <div class="row featurette"> 
     <div class="col-md-5" style="padding-top: 28px;"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found" class="img-thumbnail" style="width: auto; height: auto" ></div> 
     <div class="col-md-7"><h2 class="featurette-heading"> Second featurette heading.<span class="text-muted"> It'll blow your mind. </span> </h1> 
     <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p></div> 
    </div> 

    <br> 
    <br> 

    <div class="row featurette"> 
     <div class="col-md-7" > 
     <h2 class="featurette-heading"> Third featurette heading.<span class="text-muted"> It'll blow your mind. </span> </h1> 
     <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p> 
     </div> 

     <div class="col-md-5" style="padding-top: 28px;"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found" class="img-thumbnail" style="width: auto; height: auto" ></div> 
    </div> 

    <br> 
    <br> 
    <br> 
    <div class="row featurette"> 
     <div class="col-md-12"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found" class="img-thumbnail" style="width: auto; height: auto" ></div> 
    </div> 

    <br> 
    <br> 
    <br> 

    <div class="threeColumn"> 
     <div class="row" align="center"> 


      <div class="col-md-4"> 

      <div class="thumbnail"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found"> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 

      </div> 

      <div class="col-md-4"> 

      <div class="thumbnail"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found"> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 

      </div> 


      <div class="col-md-4"> 

      <div class="thumbnail"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/404.jpg" alt="404 Not Found"> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam sapien, malesuada at massa quis, volutpat consequat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempor justo ante, eget mattis dolor bibendum id. Vivamus sollicitudin auctor ex, non porta tortor efficitur in. Ut eu neque libero. Fusce leo dolor, finibus ut massa a, porta tincidunt justo. Ut elementum scelerisque ligula, congue rhoncus tellus finibus in. </p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 

      </div> 
      </div> 

    </div> 

<?php get_footer();?> 

，這是我的CSS

div.page-content img:first-child { 
 
\t max-width: 100%; 
 
    height: auto; 
 
} 
 
div.page-content .item { 
 
    width: 120px; 
 
    min-height: 120px; 
 
    max-height: auto; 
 
    float: left; 
 
    margin: 3px; 
 
    padding: 3px; 
 
} 
 
div.footer-table table { 
 
\t 
 
\t width: 100%; 
 
\t table-layout: fixed; 
 
} 
 
.navbar-nav > li > a, .navbar-brand { 
 
    padding-top:14px !important; 
 
    padding-bottom:0 !important; 
 
    height: 48px; 
 
\t display : block; 
 
} 
 
.navbar {min-height:48px !important;} 
 

 
/* 
 
\t ================================= 
 
\t Carrousel CSS 
 
\t ================================= 
 
*/ 
 

 
.carousel {background: #000;} 
 
.carousel .item {height: auto; overflow: hidden; } 
 
.carousel .item img {width: 100%; height: auto;} 
 
.product .img-responsive {margin: 0 auto;} 
 
.carousel-caption a {color: #fff;} 
 

 
/* 
 
\t ================================= 
 
\t Navbar CSS 
 
\t ================================= 
 
*/ 
 

 

 
.navbar-custom { 
 
    background-color: #1695d4; 
 
    border-color: #1380b6; 
 
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#33adea), to(#1695d4)); 
 
    background-image: -webkit-linear-gradient(top, #33adea, 0%, #1695d4, 100%); 
 
    background-image: -moz-linear-gradient(top, #33adea 0%, #1695d4 100%); 
 
    background-image: linear-gradient(to bottom, #33adea 0%, #1695d4 100%); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff33adea', endColorstr='#ff1695d4', GradientType=0); 
 
} 
 
.navbar-custom .navbar-brand { 
 
    color: #ffffff; 
 
} 
 
.navbar-custom .navbar-brand:hover, 
 
.navbar-custom .navbar-brand:focus { 
 
    color: #e6e6e6; 
 
    background-color: transparent; 
 
} 
 
.navbar-custom .navbar-text { 
 
    color: #ffffff; 
 
} 
 
.navbar-custom .navbar-nav > li > a { 
 
    color: #ffffff; 
 
} 
 
.navbar-custom .navbar-nav > li > a:hover, 
 
.navbar-custom .navbar-nav > li > a:focus { 
 
    color: #046ba6; 
 
    background-color: transparent; 
 
} 
 
.navbar-custom .navbar-nav > .active > a, 
 
.navbar-custom .navbar-nav > .active > a:hover, 
 
.navbar-custom .navbar-nav > .active > a:focus { 
 
    color: #046ba6; 
 
    background-color: #1380b6; 
 
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#1380b6), to(#18a0e4)); 
 
    background-image: -webkit-linear-gradient(top, #1380b6, 0%, #18a0e4, 100%); 
 
    background-image: -moz-linear-gradient(top, #1380b6 0%, #18a0e4 100%); 
 
    background-image: linear-gradient(to bottom, #1380b6 0%, #18a0e4 100%); 
 
    background-repeat: repeat-x; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1380b6', endColorstr='#ff18a0e4', GradientType=0); 
 
} 
 
.navbar-custom .navbar-nav > .disabled > a, 
 
.navbar-custom .navbar-nav > .disabled > a:hover, 
 
.navbar-custom .navbar-nav > .disabled > a:focus { 
 
    color: #cccccc; 
 
    background-color: transparent; 
 
} 
 
.navbar-custom .navbar-toggle { 
 
    border-color: #dddddd; 
 
} 
 
.navbar-custom .navbar-toggle:hover, 
 
.navbar-custom .navbar-toggle:focus { 
 
    background-color: #dddddd; 
 
} 
 
.navbar-custom .navbar-toggle .icon-bar { 
 
    background-color: #cccccc; 
 
} 
 
.navbar-custom .navbar-collapse, 
 
.navbar-custom .navbar-form { 
 
    border-color: #137eb4; 
 
} 
 
.navbar-custom .navbar-nav > .dropdown > a:hover .caret, 
 
.navbar-custom .navbar-nav > .dropdown > a:focus .caret { 
 
    border-top-color: #046ba6; 
 
    border-bottom-color: #046ba6; 
 
} 
 
.navbar-custom .navbar-nav > .open > a, 
 
.navbar-custom .navbar-nav > .open > a:hover, 
 
.navbar-custom .navbar-nav > .open > a:focus { 
 
    background-color: #1380b6; 
 
    color: #046ba6; 
 
} 
 
.navbar-custom .navbar-nav > .open > a .caret, 
 
.navbar-custom .navbar-nav > .open > a:hover .caret, 
 
.navbar-custom .navbar-nav > .open > a:focus .caret { 
 
    border-top-color: #046ba6; 
 
    border-bottom-color: #046ba6; 
 
} 
 
.navbar-custom .navbar-nav > .dropdown > a .caret { 
 
    border-top-color: #ffffff; 
 
    border-bottom-color: #ffffff; 
 
} 
 
@media (max-width: 767) { 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a { 
 
    color: #ffffff; 
 
    } 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    color: #046ba6; 
 
    background-color: transparent; 
 
    } 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus { 
 
    color: #046ba6; 
 
    background-color: #1380b6; 
 
    } 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
 
    color: #cccccc; 
 
    background-color: transparent; 
 
    } 
 
} 
 
.navbar-custom .navbar-link { 
 
    color: #ffffff; 
 
} 
 
.navbar-custom .navbar-link:hover { 
 
    color: #046ba6; 
 
} 
 

 
/* 
 
\t ================================= 
 
\t No padding CSS 
 
\t ================================= 
 
*/ 
 

 
.row.no-pad { 
 
    margin-right:0; 
 
    margin-left:0; 
 
} 
 
.row.no-pad > [class*='col-'] { 
 
    padding-right:0; 
 
    padding-left:0; 
 
}

，所以我想使模板整個畫面（如旋轉木馬等） ， 怎麼做？ （我知道這個問題在計算器重複，我已經嘗試的代碼在另一個問題，但無法正常工作：「（（我有搜索，嘗試3小時）

Answer 1

我想你使用container類

替換這個類container-fluid

Answer 2

也許你需要!important覆蓋CSS：

.row { 
    margin:10px 0 10px 0 !important; 
} 

編輯：確保你打電話給你的樣式表引導的風格後，您get_header()

Answer 3

有一些黑客可以做！其中有些是 -

使用jQuery：

var body_width = $('body').width(); 
$('.row').css('width', (body_width)); 
$('.row').css('margin-left', ('-'+(body_width/2)+'px')); 

與你的div類想成爲100％的寬度更換.row類。

容器使用流體：

結束了您的組件在.container流體將工作的魅力，如果它不試圖把HTML的部分在不同.container流體的div。

你的工作例如：https://jsfiddle.net/ishusupah/cxs3xyop/1/