twitterブートストラップを使用していても要素が重なっています

Question

私は自分のサイトでtwitterブートストラップを使用していますが、ウィンドウを小さくすると要素が重なっていることに気付きました。これは素晴らしく見えず、私はTwitterのブートストラップが私のウェブサイトをすべてのサイズで完全に反応させるべきだと思った。

<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> 
    // ...... 

まずあなたは、あなたが再び再び2 <!-- Main Buttons --><div class="row"><div class="col-sm-6">...に、画面の最初の部分を分割し、<div class="main row"><div class="col-sm-6"> ....、2つの部分に画面を分割し、これはボタンが唯一のそのスペースとして画面の1/4を持っている意味。その1/4のスペースが300px未満であれば、メインボタンの最小幅であるため、問題が発生します。