html - CSS:调整换行内联元素的对齐方式

Question

我有两个元素表示显示为内联 block 的复选框。在宽屏幕上，它们应该并排显示在一行中。两者都应该居中。

Good: 

|-----itemX--itemXYZ-----|

在较小的屏幕上，我希望它们显示在彼此之上，仍然居中但向左对齐:

Good:

|--itemX----|
|--itemXYZ--|

目前我能得到的只有:

Bad:

|---itemX---|
|--itemXYZ--|

如何使用 CSS(3) 实现这一点？

PS:我正在使用 BootStrap 3，也许这会有所帮助...

HTML:

<div id="form">
    <div class="cb"></div>
    <div class="cb"></div>
</div>

到目前为止的 CSS:

#form {
    display: block;
    text-align: center;

    @media all and (max-width: 480px) {
        //
    }
}

.cb {
    display: inline-block;
}

Answer 1

您可以使用 media queries为了那个任务。

        .checkbox{
            display: inline-block;
        }
        @media all and (max-width: 480px) {
            .checkbox{
                display: block;
            }
        }

    <div class="container text-center">
        <div class="checkbox text-center">
            <label>
                <input type="checkbox"> Checkbox 1
            </label>
        </div>
        <div class="checkbox text-center">
            <label>
                <input type="checkbox"> Checkbox 2
            </label>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>