0

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

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

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>

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

对话框截图

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

如何指定我希望复选框和描述文本与“主页”标签一致显示，以及显示其他非标签元素，即使它需要两行来执行此操作？

编辑

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

在此处输入图像描述

4

3 回答 3

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>
于 2017-07-17T10:53:59.870 回答
1

您已经给col-sm-4标签的父 div 和col-sm-10复选框的父 div。

Bootstrap 仅将页面分为 12 列。所以这两个 div 的列的总和不应超过 12。使复选框的父 div 类col-sm-8为您指定的方向。

于 2017-07-17T10:54:42.303 回答
0 
<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>
于 2017-07-17T10:49:09.920 回答