自舉排液不併排並排？

Question

我想將行分爲2（span4 & span8）但目前無法管理。第二個div（span8）滑落。我錯過了什麼？

這裏是我的相關標記：

<section id="products" data-direction="from-left"> 
     <div class="container"> 
      <a href="#" class="close"></a> 
      <h1> 
       <span lang="tr">ÜRÜNLERİMİZ</span> 
      </h1> 

      <div class="container-fluid"> 
       <div class="row-fluid"> 
        <div class="span12"> 

         <div class="carousel slide" id="myCarousel"> 
          <div class="carousel-inner"> 

           <div class="row-fluid item active"> 

            <div class="bannerImage"> 
             <a href="#"><img src="images/waspmote_pro_t.png" alt=""></a> 
             <a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt=""></a> 
             <a href="#"><img src="images/u13_gw_t.png" alt=""></a> 
            </div> 

            <div class="caption row-fluid"> 
             <div class="span12"> 
              <h3>Waspmote</h3> 

             </div> 
             <div class="row-fluid"> 
              <div class="span4"> 
               <ul style="list-style-type: none;"> 
                <li><i class="fa fa-share-alt"></i> Connect any sensor</li> 
                <li><i class="fa fa-rss"></i> Using any wireless technology</li> 
                <li><i class="fa fa-cloud"></i> To any Cloud Platform</li> 
               </ul> 

              </div> 
              <div class="span8"> 
               <ul style="list-style-type: none;"> 
                <li><i class="fa fa-share-alt"></i> Connect any sensor</li> 
                <li><i class="fa fa-rss"></i> Using any wireless technology</li> 
                <li><i class="fa fa-cloud"></i> To any Cloud Platform</li> 
               </ul> 
              </div> 
             </div> 
            </div> 

           </div><!-- /Slide1 --> 



          </div> 

          <div class="control-box"> 
           <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a> 
           <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a> 
          </div><!-- /.control-box --> 

         </div><!-- /#myCarousel --> 

        </div><!-- /.span12 --> 
       </div><!-- /.row --> 
      </div><!-- /.container --> 

     </div> 
    </section> 

下面是示例截圖： sample

這裏是FF調試： sample

編輯1：這是引導v3的。 2.0

H ere是我的相關自定義CSS：

div { 
    word-break: break-all; 
} 

img { 
    max-width: 100%; 
} 

a { 
    -webkit-transition: all 150ms ease; 
    -moz-transition: all 150ms ease; 
    -ms-transition: all 150ms ease; 
    -o-transition: all 150ms ease; 
    transition: all 150ms ease; 
} 

    a:hover { 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
     /* IE 8 */ 
     filter: alpha(opacity=50); 
     /* IE7 */ 
     opacity: 0.6; 
     text-decoration: none; 
    } 


/* Container */ 

.container-fluid { 
    background: #fbf4e0; 
    margin: 40px auto 10px; 
    padding: 20px 0px; 
    max-width: 960px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
} 


/* Page Header */ 

.page-header { 
    background: #fbf4e0; 
    margin: -30px 0px 0px; 
    padding: 20px 40px; 
    border-top: 4px solid #ccc; 
    color: #a83b3b; 
    text-transform: uppercase; 
} 

    .page-header h3 { 
     line-height: 0.88rem; 
     color: #a83b3b; 
    } 


/* Thumbnail Box */ 

.caption { 
    height: 140px; 
    width: 100%; 
    margin: 10px 0px; 
    padding: 20px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

    .caption .span4, 
    .caption .span8 { 
     padding: 0px 20px; 
    } 

    .caption .span4 { 
     border-right: 1px dotted #CCCCCC; 
    } 

    .caption h3 { 
     color: #a83b3b; 
     line-height: 2rem; 
     margin: 0 0 20px; 
     text-transform: uppercase; 
    } 

    .caption p { 
     font-size: 1rem; 
     line-height: 1.6rem; 
     color: #a83b3b; 
    } 
    .caption ul{ 
     color: #a83b3b; 
    } 

.btn.btn-mini { 
    background: #a83b3b; 
    border-radius: 0 0 0 0; 
    color: #fbf4e0; 
    font-size: 0.63rem; 
    text-shadow: none !important; 
} 

.carousel-control { 
    top: 33%; 
} 


/* Footer */ 

.footer { 
    margin: auto; 
    width: 100%; 
    max-width: 960px; 
    display: block; 
    font-size: 0.69rem; 
} 

    .footer, 
    .footer a { 
     color: #fff; 
    } 

p.right { 
    float: right; 
} 


::selection { 
    background: #ff5e99; 
    color: #FFFFFF; 
    text-shadow: 0; 
} 

::-moz-selection { 
    background: #ff5e99; 
    color: #FFFFFF; 
} 

a, 
a:focus, 
a:active, 
a:hover, 
object, 
embed { 
    outline: none; 
} 

:-moz-any-link:focus { 
    outline: none; 
} 

input::-moz-focus-inner { 
    border: 0; 
} 

.bannerImage img { 
    margin-left: 10%; 
    /*margin-right: 10%;*/ 
} 

編輯2：這裏是其他的CSS文件。

<!-- ============================================== 
     CSS 
     =============================================== --> 
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 

預先感謝&問候。

Answer 1

因此，您用於腳手架的類別（row-fluid和span*）來自較早的version引導程序。

您需要使用Bootstrap 3的腳手架類，例如：container-fluid,row，col-md-*。檢查Bootstrap 3網格系統here的完整文檔。

例子：

相反的：

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span12"></div> 
    </div> 
    <div class="row-fluid"> 
    <div class="span8"></div> 
    <div class="span4"></div> 
    </div> 
</div> 

用途：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8"></div> 
    <div class="col-md-4"></div> 
    </div> 
</div>