2016-04-29 48 views
0

我有編碼設置爲容器流體,這樣我的col-md-12列將跨越整個屏幕,但它只跨越在右邊和他們的左邊有一個巨大的缺口。繼承人我的代碼請幫助。我不知道他們是否可能是別的東西,即使我們沒有看到那是用過容器的液體。bootstrap,我不能得到容器是流體(全寬)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>

+0

我不知道它被附加到容器1,我需要做什麼來分離兩個部分? –

+1

通過關閉特定容器來修復它,謝謝! –

回答

0

容器類不應該被添加到將是全寬,除非你想手動重置每個情況保證金/填充父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(等)。

0

該類似乎是罪魁禍首:

.container1 { 
    margin-left: 15%; 
    margin-top: 9%; 
} 

評論/刪除這些邊距,您指的是排水溝應該消失。

編輯:fiddle

+0

,允許容器成爲全寬,但內容的其餘部分發生了變化,有沒有辦法將自舉中心保持​​在中間 –

+0

我通常嘗試使用容器代替容器流體,因爲它提供了15px的邊距在雙方。你是這個意思嗎? – TonalLynx