即使我使用twitter引導程序，元素之間也是相互重疊的

Question

我在我的網站上使用twitter引導程序，我注意到如果我使窗口變小，元素重疊。這看起來不太好，我認爲twitter bootstrap應該讓我的網站在所有尺寸上都能夠全面響應。

<div class="main row"> 
    <div class="col-sm-6"> 
     <center><h3>Firmware Download</h3></center> 

<!-- Main Buttons --> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <button class="mainButtons" id="downloadFW">Download newest firmware to the server</button> 
       <button class="mainButtons" id="reboot">Reboot server</button> 
      </div> 
      <div class="col-sm-6"> 
       <button class="mainButtons" id="deleteLogfile">Delete logfile</button> 
       <button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button> 
      </div> 
     </div> 

<!-- Template Generierung --> 
     <div class="templateButtons col-sm-12"> 
      <h4>Create Template</h4> 
      <select id="firmwareTemplate"> 
       <option value="mb">MB</option> 
       <option value="bm">BM</option> 
      </select> 
      <select id="fileType"> 
       <option value="ova">OVA</option> 
       <option value="vhd">VHD</option> 
      </select> 
      <button id="generateTemplate">Template erstellen</button> 
     </div> 
    </div> 

    <div class="codeBox col-sm-6"> 
     <h5>Ausgabe:</h5> 
     <pre id="codeOutput">-</pre> 
    </div> 
</div> 

CSS：

body { 
    margin: 20px; 
} 

.codeBox { 
    border: 1px solid black; 
    overflow-y: scroll; 
} 
.codeBox code { 
    /* Styles in here affect the text of the codebox */ 
    font-size:0.9em; 
    /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */ 
} 
.lineTop { 
    height: 1px; 
    background-color: #D8D8D8; 
    margin-top: 20px; 
} 
.lineBottom { 
    height: 1px; 
    background-color: #D8D8D8; 
    margin-bottom: 20px; 
} 
.lineNoMargin { 
    height: 2px; 
    background-color: #D8D8D8; 
} 
.main { 
    height: 350px; 
    margin-left: 20px; 
} 
.mainButtons { 
    min-width: 300px; 
    text-align:left; 
} 
.templateButtons { 
    margin-top: 50px; 
    margin-left: 12px; 
} 

#templateStatusOutput { 
    min-height: 240px; 
} 
#deleteTemplateStatusFile { 
    visibility: hidden; 
} 
.statusBarContainer { 
    border: 1px solid #D8D8D8; 
    padding-right: 0; 
    padding-left: 0; 
} 
.statusBar { 
    height: 20px; 
    background-color: #5cb85c; 
    width: 0; 
    color: white; 
} 
#statusBarTemplateStatus { 
    background-color: green; 
} 
#statusBarCopyStatus { 
    background-color: orangered; 
} 
.makeSpace50 { 
    height: 50px; 
} 
#statusBar1 { 
    visibility: hidden; 
} 
#statusBar2 { 
    visibility: hidden; 
} 

這是我的錯嗎？

Answer 1

你在你的CSS使用的絕對值，例如：

.mainButtons { 
    min-width: 300px; 
    text-align:left; 
} 

嘗試使用類似百分比，例如相對值，從而元件可以保持自舉的響應：

.mainButtons { 
    min-width: 100%; 
    text-align:left; 
} 

- -------------更新-------------------

在這裏看你的代碼：

<div class="main row"> 
<div class="col-sm-6"> 
    <center><h3>Firmware Download</h3></center> 

    <!-- Main Buttons --> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <button class="mainButtons" id="downloadFW">Download newest firmware to the server</button> 
      <button class="mainButtons" id="reboot">Reboot server</button> 
     </div> 
     <div class="col-sm-6"> 
      <button class="mainButtons" id="deleteLogfile">Delete logfile</button> 
      <button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button> 
     </div> 
    </div> 
    // ...... 

首先你把屏幕劃分爲兩個部分，<div class="main row"><div class="col-sm-6"> ....，然後再次把屏幕的第一部分爲兩個再次<!-- Main Buttons --><div class="row"><div class="col-sm-6">...，這意味着按鈕只有你的屏幕作爲其空間的1/4。如果這個1/4的空間小於300px，因爲它是mainButton的最小寬度，那麼你的問題就出現了。