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;
}

尝试使用百分比等相对值，以便元素可以保持引导程序的响应能力：

.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"> ....，然后再次将屏幕的第一部分再分为两部<div class="row"><div class="col-sm-6">...，这意味着按钮只有屏幕的1/4它的空间。如果1/4空间小于300px，因为它是mainButtons的最小宽度，那么您的问题就出现了。

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

1 个答案: