html - 即使我使用 twitter bootstrap，元素也会相互重叠

Question

我在我的网站上使用 twitter bootstrap，我注意到如果我缩小窗口，元素就会重叠。这看起来不太好，我认为 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;
}

尝试使用相对值，例如百分比，以便元素可以保持 Bootstrap 的响应能力:

.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，因为它是你的 mainButtons 的最小宽度，那么你的问题就出现了。