Question

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

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

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>

但是，出于某种原因，我为其添加的复选框和描述的布局与对话框中显示的所有其他内容不同：

我期待着复选框＆amp;与“主页”标签一起显示内容的描述，就像所有其他项目一样......我猜测这个在新行上显示的原因可能是因为文本的宽度太长了对话框？

如何指定我想要复选框＆amp;说明文字与'主页'标签一致显示，＆amp;显示其他非标签元素，即使它占用两行来执行此操作？

修改

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

Answer 1

似乎你有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 2

您已将col-sm-4标记为父级div，将col-sm-10标记为复选框的父级div。

Bootstrap将页面分为12列。因此，这两个div列的总和不应超过12.将复选框的父div类设为col-sm-8，如同您指示的那样。

Answer 3

<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>

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

3 个答案: