Question

我正在尝试将我的滑块宽度设置为screenwidth，而不是我从左侧和右侧有一些填充，它看起来很难看。搜索的东西，我发现的所有是Jquery插件我在想是否已经有一个bootstrap类申请并使事情发生或进行一些css修改。

<div class="container-fluid">
                <div class="col-md-12">                 
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#myCarousel" data-slide-to="1"></li>
                                        <li data-target="#myCarousel" data-slide-to="2"></li>
                                        <li data-target="#myCarousel" data-slide-to="3"></li>
                                        <li data-target="#myCarousel" data-slide-to="4"></li>
                                        <li data-target="#myCarousel" data-slide-to="5"></li>
                                        <li data-target="#myCarousel" data-slide-to="6"></li>
                                    </ol>                                   
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner"  role="listbox">

                                        <div class="item active">
                                            ...
                                        </div>  

                                        <div class="item">
                                            ...
                                        </div>  

                                        <div class="item">
                                            ...
                                        </div>                                  
                                    </div>
                                    <!-- Left and right controls -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                </div>
            </div>

Answer 1

使用bootstrap，你必须在.col-md和.container-fluid之间创建一个.row div。它将删除由.col-md

创建的15px填充

或者你可以简单地添加一个自定义类并在其上应用填充：0。

Answer 2

当没有任何意义时，不要使用bootstrap类，只用带有margin auto的块元素替换.container-fluid; 或者您可以使用具有负x边距的.row类来为嵌套填充元素创建套接字父级。

Answer 3

在您的自定义CSS文件中，您可以在.full中添加类似.container-fluid的类，并添加一些样式来覆盖bootstrap.css样式，而不会混淆您可能在其中使用的其他常见类像.col-md-12这样的网站。

要关注Docs，您应该.row拥有任何.col-md-*的父级或任何类型的col-xx-* in bootstrap

段

＆＃13;

$('.carousel').carousel();

＆＃13;

/* CSS used here will be applied after bootstrap.css */

.full.container-fluid,
.full .col-md-12 {
  padding-left: 0;
  padding-right: 0
}
.full .row {
  margin-left: 0;
  margin-right: 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="full container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
          <li data-target="#myCarousel" data-slide-to="4"></li>
          <li data-target="#myCarousel" data-slide-to="5"></li>
          <li data-target="#myCarousel" data-slide-to="6"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#">
              <img alt="..." src="//lorempixel.com/1600/900">
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img alt="..." src="//placehold.it/1600x900/000/FFF">
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img alt="..." src="//placehold.it/1600x900/c00/FFF">
            </a>
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

将以下规则添加到您的css文件中：

.container-fluid {
  padding: 0px !important;
}

用你的col-md-12包装.row div为ex：

...
<div class="row">
   <div class="col-md-12">
   ...

Bootstrap全屏宽度响应轮播

4 个答案:

段