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/