Question

我试图在2列中显示一组8个复选框，这些复选框在框的右侧，并且它们在中心对齐。我希望他们左对齐，但似乎无法使他们工作。其中包括一小部分表格。

<h5 class="text-center">Please check all ares of interest</h5>
<div class="form-inline">
    <div class="form-check col-lg-6">
        <input class="form-check-input" type="checkbox" name="interest[]" value="Managed Services" id="msp">
        <label class="form-check-label" for="msp">Managed Services</label>
    </div>
    <div class="form-check col-lg-6">
        <input class="form-check-input" type="checkbox" name="interest[]" value="Tech Support" id="support">
        <label class="form-check-label" for="support">Tech Support</label>
    </div>
</div>

和CSS。我尝试添加text-left并添加另一个类，但都没有用。

body {
    background-image: url("../img/bg4.png");
    background-repeat: repeat;
    min-height: 100vh;
    position: relative;
}
header {
    margin: 25px 0px;
}
hr {
    border: 1px solid #777;
}
hr.light {
    border: 1px solid #f00;
}
section {
    margin-top: 15px;
}
footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    line-height: 20px;
}
footer a {
    text-decoration: none;
    color: #222;
}
/* MISC */
.logo {
    color: #ED1B34;
    font-weight: bold;
    font-size: 2.5em;
}
.company {
    color: #4B4E56;
    font-weight: 600;
    font-size: 2.5em;
}
.slogan {
    color: #0d0f12;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 4px;
}
.bold {
    font-weight: bold;
    font-size: 1.1em;
}
.left {
    border-right: 1px solid grey;
}
.fa-heart {
    color: red;
}
.form-check {
    padding-right: .9rem;
}
.form-error {
    color: red;
}
.form-success {
    color: green;
    font-size: 120%;
}
div.form-group label {
    margin-bottom: 0;
}
.form-check-label {
    font-size: 85%;
}
.form-check {
    margin-bottom: 5px;
}

Answer 1

默认的 bootstrap 样式在较小的断点及上方具有.form-inline .form-check的居中对齐内容。这就是.form-check中的复选框和标签居中对齐的原因：

@media (min-width: 576px)
    .form-inline .form-check {
        display: flex;
        ...
        justify-content: center;
        ...
    }

有很多方法可以使复选框左对齐。以下是一个：

<h5 class="text-center">Please check all ares of interest</h5>
<div class="row">
    <div class="col-auto col-lg-6">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="interest[]" value="Managed Services" id="msp">
            <label class="form-check-label" for="msp">Managed Services</label>
        </div>
    </div>
    <div class="col-auto col-lg-6">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="interest[]" value="Tech Support" id="support">
            <label class="form-check-label" for="support">Tech Support</label>
        </div>
    </div>
</div>

无论何时使用列，我仍建议使用.row将列包装起来。而且，您不必使用.form-inline在较小的屏幕中排成一列的复选框。您可以使用.col-auto，它将宽度设置为自动。

我个人将使用.row和.col-*来设置所需的结构/网格，然后将元素放入网格中。这只是我的个人喜好。

演示： https://jsfiddle.net/davidliang2008/7qfLcko1/5/

如何左对齐一组复选框？

1 个答案: