个人中心
gpt4 book ai didi

html - bootstrap，我无法让容器变得流畅(全宽)col-md-12

转载 作者：行者123 更新时间：2023-11-28 05:58:04 26 4
gpt4 key购买 nike

我将编码设置为 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>

最佳答案

不应将容器类添加到将成为全宽的父 div，除非您想针对每种情况手动重置边距/填充。

Here's what i think you want

Minimal working code here

基本上，div 的层次结构是 div.container > div.row > div.col-xs-12/div.col-md-6(等等)..

如果你想要一个全宽容器，例如:div.conainer-fluid > div.container > div.row > div.col-md-6(等等)。

关于html - bootstrap，我无法让容器变得流畅(全宽)col-md-12，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36945615/

26 4 0
文章推荐： html - 传统 ASP 经典应用程序，需要一致的表格宽度、动态文本区域列？
文章推荐： javascript - 首先加载标题，然后等待加载 Angular 应用程序中的主要内容
文章推荐： c++ - std::array 的读取范围
文章推荐： javascript - Android Webview 无法直接通过 getElementById().click() 重定向到网站
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com