HTML-如何指定输入和输出的布局；跨度标签？

在我的网站上，我点击了“保存”按钮，点击后会打开一个对话框。该对话框显示了有关正在保存的页面的一些信息，我刚刚添加了一个复选框，允许用户指定他们希望该页面成为站点的“主页”。i、 e.选中该框并单击对话框上的“保存”按钮后，他们当前查看的页面将被设置为“主页”，因此，每当他们单击网站上的“主页”按钮时，他们都会被带到该页面，而不是默认页面

这项功能目前可以使用，我现在正试图整理演示文稿/布局，使其与对话框的其余部分保持一致

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>

{{layout.direction}

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

我希望复选框和说明与“主页”标签一起显示，就像所有其他项目一样。。。我猜这可能是因为文本的宽度对于对话框来说太长了

如何指定我希望复选框和说明文本与“主页”标签一起显示，以及与其他非标签元素一起显示，即使这样做需要两行

编辑

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

{{layout.direction}

{{layout.direction}

似乎您有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>

{{layout.direction}

似乎您有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>

{{layout.direction}

您已将

col-sm-4

指定给标签的父div，并将

col-sm-10

指定给复选框的父div

---

引导程序仅将页面划分为12列。所以这两个div列的总和不应该超过12。将复选框的父div类设置为指定方向的

col-sm-8

。

将

col-sm-4

设置为标签的父div，将

col-sm-10

设置为复选框的父div

---

引导程序仅将页面划分为12列。所以这两个div列的总和不应该超过12。将复选框的父div类设置为

col-sm-8

，正如您给出的方向一样。

谢谢您的回答。我尝试了一下，它解决了最初的问题-复选框和说明文本现在与对话框的其他“非标签”元素一致，并显示在两行上。。。然而，由于某些原因，它们显示在“主页”标签下方的一行，即它们与它不一致。。。你知道这是为什么吗？啊，似乎是因为我在someone2088的

@someone2088里有一个额外的

标签。我也会编辑答案。谢谢你的回答。我尝试了一下，它解决了最初的问题-复选框和说明文本现在与对话框的其他“非标签”元素一致，并显示在两行上。。。然而，由于某些原因，它们显示在“主页”标签下方的一行，即它们与它不一致。。。你知道这是为什么吗？啊，似乎是因为我在someone2088的

@someone2088里有一个额外的

标签。我还将编辑答案。感谢您的回答-我这样做了，它已将问题与列排序-复选框和文本现在与页面的其他“非标签”元素对齐，但是由于某些原因，这使复选框和说明比标签低一行，而不是一行。。。我怎样才能让它们显示在同一行上呢？这是因为bootstrap的checkbox类的margin top为10px；覆盖到0px.checkbox{margin top:0px；}你能检查一下元素，看看它是否被其他元素覆盖了吗？给重点检查一下。checkbox{margin top:0px！重点；}谢谢你的回答-我这样做了，它已经用列对问题进行了排序-复选框和文本现在与页面的其他“非标签”元素对齐，但是由于某些原因，这使得复选框和说明比标签低一行，并且不对齐。。。我怎样才能让它们显示在同一行上呢？这是因为bootstrap的checkbox类的margin top为10px；覆盖到0px.checkbox{margin top:0px；}您可以检查元素，看看它是否被其他元素覆盖，或者是否被其他元素覆盖，并进行重要检查。checkbox{margin top:0px！重要；}