如何使用 bootstrap 水平对齐组件？

Question

我在下面bootstrap使用了一个搜索页面。

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

屏幕分辨率：1360*768

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

屏幕分辨率：1024*768

这是我使用的代码 bootstrap class:

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

Answer 1

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

Answer 2

将您的代码修改为

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

在 form-group classes 中的相应行。请注意，我为表单组 class

添加了 col-md-x

Answer 3

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

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

** 此外，您可以将 "col-xs-12 col-md-12 col-lg-12" 合并为 "col-xs-12"，因为 bootstrap 从小到大读取。（实际上，你可能不需要，因为 col-*-12 是默认设置，但如果你要改变它，它可能对经验不足的开发人员有用。）

下面您可以看到 class 尺寸和 http://getbootstrap.com/css/#grid-media-queries 中的 copy/pasted 供您欣赏。

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

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

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

如何使用 bootstrap 水平对齐组件？

How to align component horizentally using bootstrap?

html

css

components

zk

twitter-bootstrap