如何使用引导程序水平对齐组件？答案

【问题标题】：How to align component horizentally using bootstrap?如何使用引导程序水平对齐组件？
【发布时间】：2015-08-26 23:58:13
【问题描述】：

我在下面使用了引导到搜索页面。

其实我想要这种分辨率为1024*768的屏幕。

屏幕分辨率：1360*768

但它无法在分辨率以下工作。

屏幕分辨率：1024*768

这是我使用的引导类代码：

<div class=" col-xs-12 col-md-12 col-lg-12">
                    <div class="box">
                        <div class="box-body">
                            <x:form class="form-vertical" role="form">
                                <div class="form-group col-lg-8">
                                    <textbox value="@bind(vm.searchValue)"
                                        sclass="form-control" onOK="@command('doSearch')"
                                        tooltiptext="${vm.getText('PeopleDetail:LABEL_SEARCH')}"
                                        placeholder="${vm.getText('PeopleDetail:LABEL_SEARCH')}">
                                    </textbox>
                                </div>

                                <div class="form-group col-lg-4">
                                    <x:button type="submit"
                                        class="btn btn-inverse" value="search"
                                        onClick="@command('doSearch')" accesskey="s"
                                        title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}">
                                        ${vm.getText('PeopleDetail:BUTTON_SEARCH')}
                                    </x:button>
                                    <x:button type="submit"
                                        style="margin-left:20px;" class="btn btn-inverse"
                                        value="search" onClick="@command('clearQuery')"
                                        title="${vm.getText('PeopleDetail:BUTTON_CLEAR')}">
                                        ${vm.getText('PeopleDetail:BUTTON_CLEAR')}
                                    </x:button>
                                    <span>
                                        <x:a href="#" accesskey="q"
                                            onClick="@command('showQueryPage')" style="margin-left:20px;"
                                            title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}">
                                            ${vm.getText('PeopleDetail:LABEL_ADVANCED_SEARCH')}
                                        </x:a>
                                    </span>
                                </div>
                            </x:form>
                        </div>
                    </div>
                </div>

【问题讨论】：

标签： html css twitter-bootstrap components zk

【解决方案1】：

在您当前的分辨率下，您需要“col-md-*”类才能显示样式。

您可以在此处查看引导媒体查询： http://getbootstrap.com/css/#grid-media-queries

** 此外，您可以将“col-xs-12 col-md-12 col-lg-12”合并到“col-xs-12”，因为引导程序从小到大读取。（实际上，您可能不需要，因为 col-*-12 是默认设置，但如果您以后要进行更改，它可能对经验不足的开发人员有用。）

您可以在下面查看类别和大小，从http://getbootstrap.com/css/#grid-media-queries 复制/粘贴以供您观赏。

/* 小型设备（平板电脑，768px 及以上）*/ @media（最小宽度：@screen-sm-min）{ ... }

/* 中型设备（台式机，992px 及以上）*/ @media（最小宽度：@screen-md-min）{ ... }

/* 大型设备（大型桌面，1200px 及以上）*/ @media（最小宽度：@screen-lg-min）{ ... }

【讨论】：

【解决方案2】：

您可以将 col-lg 类替换为 col-md 类。它会正常工作。 1024 *768以下可以添加col-xs或者col-sm类，一个个打断。

【讨论】：

【解决方案3】：

修改你的代码为

<div class="form-group col-md-8 col-lg-8">
<div class="form-group col-md-4 col-lg-4">

在form-group 类中的相应行。请注意，我为 form-group 类添加了 col-md-x

【讨论】：