Question

我正在使用bootsrap 3.3.7并且我试图使引导程序适合屏幕，但我失败了。我在互联网上搜索并尝试但不工作。

这是图片

我只是成功地使导航栏适合屏幕，而不是旋转木马和其他人。

这是我的代码

    <?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

＆＃13;

div.page-content img:first-child {
	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 {
	
	width: 100%;
	table-layout: fixed;
}
.navbar-nav > li > a, .navbar-brand {
    padding-top:14px !important; 
    padding-bottom:0 !important;
    height: 48px;
	display : block;
}
.navbar {min-height:48px !important;}

/*
	=================================
	Carrousel CSS
	=================================
*/

.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;}

/*
	=================================
	Navbar CSS
	=================================
*/


.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;
}

/*
	=================================
	No padding CSS
	=================================
*/

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

＆＃13;

所以我想让模板适合屏幕（例如旋转木马和其他），怎么做？（我知道这个问题在stackoverflow中重复，我在另一个问题中尝试了代码，但没有工作：＆＃39;（（我已经搜索并尝试了3个小时）

Answer 1

我认为你使用container Class

替换此课程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'));

用你的divs类替换.row类想要100％宽度。

使用容器流体：

如果不尝试将html的部分放在不同的.container-fluid div中，那么<。>将.container-fluid中的组件包装起来就会很有魅力。

您的工作示例：https://jsfiddle.net/ishusupah/cxs3xyop/1/

Bootstrap组件适合屏幕

3 个答案: