时间戳

首页 > 解决方案 > 如何左对齐一组复选框？

html - 如何左对齐一组复选框？

问题描述

我试图在 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;
}

标签： htmlbootstrap-4

解决方案

默认引导.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/

推荐阅读