引导程序，我无法使容器变得流畅（全宽）col-md-12

debugcn 发表于 Dev

乔尔·沃尔

我已将编码设置为container-fluid，以便我的col-md-12列将覆盖整个屏幕，但是它仅覆盖右侧，而它们的左侧则是一个巨大的空隙。这是我的代码，请帮忙。我不知道他们是否可能是其他原因，我没有看到过度使用集装箱液。

<style type="text/css"> .main-text {
  position: absolute;
  top: 50px;
  width: 96.66666666666666%;
  color: #FFF;
}
.btn-min-block {
  min-width: 120px;
  line-height: 26px;
}
.btn-clear {
  color: #FFF;
  background-color: transparent;
  border-color: #FFF;
  margin-right: 15px;
}
.btn-clear:hover {
  color: #000;
  background-color: #FFF;
}
.carousel-caption {
  text-align: center;
}
.container1 {
  margin-left: 15%;
  margin-top: 9%;
}
.container1img1 {
  margin-left: 15%;
}
.container1img2 {
  margin-left: -24%;
  margin-top: -10%;
}
.container {
  float: left;
  display: block;
  margin-top: 5%;
}
.demo-content img {
  display: block;
  margin-right: 5%;
}
.set4 > .row > .col-md-12 {
  background-color: black;
  height: 250px;
}
.set4 h2 {
  color: #FFFFFF;
}
</style>

<body>
  <div class="container-fluid main-content">
    <div class="row">
      <div class="col-md-12">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img src="images/mainimg01.png" alt="First slide">
              <div class="carousel-caption">
                <h3></h3>
                <p>
                </p>
              </div>
            </div>
            <div class="item">
              <img src="images/mainimg01.png" alt="Second slide">
              <div class="carousel-caption">
                <h3>
                                </h3>
                <p>
                </p>
              </div>
            </div>
            <div class="item">
              <img src="images/mainimg01.png" alt="Third slide">
              <div class="carousel-caption">
                <h3>
                               </h3>
                <p>
                </p>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
        </div>
        <div class="main-text hidden-xs">
          <div class="col-md-12 text-center">
            <h1>
                        <img src="images/dslogo.png" alt="depot square"></h1>
            <h3>
                        Your elegant and affordable destination<br>for family, business and community events.
                    </h3>
            <div class="button">
              <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="push">
  </div>
  <div class="container1">
    <div class="row">
      <div class="col-md-3">
        <div class="headline">
          <H3>What Makes</H3>
          <h2>Depot Square Special?</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div class="container1img1">
            <img src="images/piano1.png">
          </div>
        </div>

        <div class="row">
          <div class="col-md-5">
            <div class="container1img2">
              <img src="images/venue1.png">
            </div>
          </div>
        </div>
        <div class="container set2">
          <!--Row with three equal columns-->
          <div class="row">
            <div class="col-md-4">
              <div class="demo-content">
                <img src="images/squareicon.png" class="pull-left">
                <h3>Versatile Spaces</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="demo-content bg-alt">
                <img src="images/pointericon.png" class="pull-left">
                <h3>Central Location</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="demo-content">
                <img src="images/foodicon.png" class="pull-left">
                <h3>Catering to Taste</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="container set3">
          <!--Row with three equal columns-->
          <div class="row">
            <div class="col-md-4">
              <div class="demo-content">
                <img src="images/stafficon.png" class="pull-left">
                <h3>Helpful Staff</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="demo-content bg-alt">
                <img src="images/soundicon.png" class="pull-left">
                <h3>Flexible Service</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="demo-content">
                <img src="images/supporticon.png" class="pull-left">
                <h3>Great Support</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="container-fluid set4">
          <div class="row">
            <div class="col-md-12 text-center">
              <h2>Past Events</h2>
              <div class="button1">
                <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">ALL EVENTS</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CORPORATE</a><a class="btn btn-clear btn-sm btn-min-block"
                href="http://www.jquery2dotnet.com/">WEDDING</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">COMMUNITY</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">+</a>
              </div>
            </div>
          </div>
        </div>
      </div>
</body>

4忍者

除非您要针对每种情况手动重置边距/填充，否则不应将容器类添加到将变为全角的父div中。

这就是我想你想要的

最小的工作代码在这里

基本上，div的层次结构去div.container > div.row > div.col-xs-12/ div.col-md-6（等等）..

如果您要使用全角容器，例如：（div.conainer-fluid > div.container > div.row > div.col-md-6等）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。