2015-08-23 48 views
0

我試圖在移動屏幕上使彼此之下的列堆棧相互對齊,但讓它們在桌面上並排顯示。我很困惑的地獄,這應該是超級簡單,但我看不到我的錯誤......列在引導程序中沒有響應

<section id="about"> 
    <div class="container"> 
     <div class="row text-center"> 
      <div class="col-md-6 col-sm-12 col-xs-12"> 
       <img class="ratio" src="img/about1.jpg"> 
       <div class="about-heading">Our Services</div> 
       <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div> 
      </div> 
      <div class="col-md-6 col-sm-12 col-xs-12"> 
       <img class="ratio" src="img/about2.jpg"> 
       <div class="about-heading">About Us</div> 
       <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div> 
      </div> 
     </div> 
    </div> 
</section> 

http://goo.gl/woSq0c

+0

你可能在你的CCS文件已經覆蓋缺省引導行爲! – Muhammad

+0

假設我已經重寫了默認行爲,需要更新哪個文件,style.css文件或bootstrap.css文件 –

+0

style.css,您已經注意到了bootstrap.css,因爲如果您編輯它,可能會導致一些不需要的行爲 – Muhammad

回答

0

你只需要col-md-col-sm-col-xs-之一。

查看此答案以瞭解更多信息:https://stackoverflow.com/a/19865627/2181514

Bootstrap有12列,但你的列都設置爲填滿所有12列,所以它們永遠不會相鄰。僅限使用-6

變化都

<div class="col-md-6 col-sm-12 col-xs-12"> 

只是

<div class="col-md-6"> 

<div class="col-sm-6"> 
+0

由於某些原因,即使使用該代碼,它也不會堆疊... –