Bootstrap v3.3.0列太寬

我對這個問題感到非常沮喪，搜索了很多選項，沒有發現任何工作，也沒有內心深入思考它。Bootstrap v3.3.0列太寬

有問題的網站是https://flix-c9-airbusai342.c9.io/。

在這裏，我遇到了移動設備中列太寬的問題。是的，他們正在堆疊，但不知道是什麼導致它太寬。

下面是該區域代碼的直接代碼片段。類.stats僅用於更改背景顏色background-color: #D8D8D8;。

<section class="stats"> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-md-4" align="center"> 
      <span class="fa-stack fa-4x"> 
       <i class="fa fa-circle fa-stack-2x turquoise"></i> 
       <i class="fa fa-code fa-stack-1x fa-inverse"></i> 
      </span> 
      <h2>Professional Coding</h2> 
      <span class="text-muted"><p>A team of experienced web developers are ready to give you the best quality code available to be provded for you. <b>Each</b> and <b>every</b> time.</p></span> 
     </div> 
     <div class="col-md-4" align="center"> 
      <span class="fa-stack fa-4x"> 
       <i class="fa fa-circle fa-stack-2x turquoise"></i> 
       <i class="fa fa-bolt fa-stack-1x fa-inverse"></i> 
      </span> 
      <h2>Dedicated Team</h2> 
      <span class="text-muted"><p>Nothing's perfect. Even us. Thus, our dedicated team is ready to help you whenever you need it, even if it means sacrificing leasure time.</p></span> 
     </div> 
     <div class="col-md-4" align="center"> 
      <span class="fa-stack fa-4x"> 
       <i class="fa fa-circle fa-stack-2x turquoise"></i> 
       <i class="fa fa-mobile fa-stack-1x fa-inverse"></i> 
      </span> 
      <h2>Mobile compatible</h2> 
      <span class="text-muted"><p>We know the new trends of websites. Meeting popular demand, our websites by default look great on any device across. Even this website.</p></span> 
     </div> 
    </div> 
</div>

我公然允許您查看該網站的頁面的源代碼。

感謝您的協助;我沉悶的頭腦正在受苦。 :)

來源

2014-11-04 AirbusAi342

.row不是流體 - 這在引導程序3中不存在，會使網格變得混亂。 – Christina 2014-11-04 22:25:23

也，不要使用align =「center」，這也會弄亂你的佈局。這是我自2000年代初以來從未見過的事情。在col-md-4上使用「text-center」。 class =「col-md-4 text-center」 – Christina 2014-11-04 22:26:58

另請參見答案，您的.section上有一個最小寬度 – Christina 2014-11-04 22:27:23

你有960像素一個最小寬度您.section

刪除，將解決很多事情。如果您不希望自己的內容伸展到窗口的整個寬度，請改爲使用max-width: 960px;。否則，請刪除最小寬度960px

刪除.row-fluid並使用.row。

刪除align="center"那老東西

對您想要爲中心的東西父用.text-center（前提是該inline或inline-block的元素）

使用.center-block任何塊元素（如一個.img-responsive）。

來源

2014-11-04 22:25:55 chdltest

OP：請務必閱讀文檔並使用示例進行操作。你沒有閱讀文檔。 – Christina 2014-11-04 22:33:21

看起來我必須等一分鐘，但讓我說，驚人的幫助，然後標記爲答案。但是，謝謝！看起來我仍然是這個東西上的新人，但是謝謝你教我一些東西。 :) – AirbusAi342 2014-11-04 22:38:07

Bootstrap v3.3.0列太寬

回答

相關問題