HTML- 如何指定 input 和 span 标签的布局？

Question

在我的网站上，我有 'Save' 按钮，单击它会打开一个对话框。该对话框显示有关正在保存的页面的一些信息，我还添加了一个复选框以允许用户指定他们希望此页面成为站点的 'Home' 页面。即在选中该框并单击对话框上的 'Save' 按钮后，他们当前正在查看的页面将被设置为 'Home' 页面，这样每当他们单击 'Home'按钮，他们将被带到此页面而不是默认页面。

此功能目前有效，我现在正试图整理演示文稿/布局，使其与对话框的其余部分保持一致。

HTML是：

<div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox">
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>
</div>

但是，由于某些原因，我为其添加的复选框布局和说明与对话框中显示的其他所有内容都不相同：

我希望复选框和描述与 'Homepage' 标签内联显示，就像所有其他项目一样......我猜这是在新的行可能是因为文本的宽度对于对话框来说太长了？

如何指定我希望复选框和描述文本与 'Homepage' 标签显示一致，并显示其他非标签元素，即使它占用两行这个？

编辑

我尝试了答案中给出的建议 - 虽然这解决了布局的 'column' 问题，但它没有解决 'row' 问题 - 即文本现在仅限于正确的列，但出于某种原因，它似乎仍显示在标签的单独行中：

Answer 1

<div data-ng-show="layout.style == 'grid'">
        <div class="divider"></div>
        <div class="row">
            <div class="col-sm-4 col-xs-4">
                <label data-i18n="Direction:"></label>
            </div>
            <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Homepage:"></label>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-10 checkbox">
            <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
        </div>
    </div>

Answer 2

您似乎有 12 列布局，但在最后一行中使用了 14 列指令。

<div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox"> <!-- should be col-sm-8 -->
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>

所以总体上试试这个：

<div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-8 checkbox">
        <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
        <span data-i18n="Set this page as the home page"></span>
    </div>
</div>

Answer 3

您已将 col-sm-4 分配给标签的父级 div 并将 col-sm-10 分配给复选框的父级 div。

Bootstrap div仅将页面划分为 12 列。所以这两个 div 的列的总和不应超过 12。将复选框的父级 div class 设置为 col-sm-8，因为你已经给出了方向。

HTML- 如何指定 input 和 span 标签的布局？

HTML- how do I specify the layout of input & span tags?

html

page-layout