Как я могу выровнять набор флажков слева?

Question

Я пытаюсь показать группу из 8 флажков в 2 столбцах с метками справа от прямоугольников, которые выравнивают центр.Я хочу, чтобы они выровнялись по левому краю, но не могу заставить их работать.Включен небольшой кусочек формы.

<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.Я попытался добавить текст слева, а также добавить другой класс, но ни один из них не сработал.

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/