如何使用bootstrap horizentally对齐组件？

Question

我在下面的bootstrap中使用了搜索页面。

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

屏幕分辨率：1360 * 768

但它不能低于分辨率。

屏幕分辨率：1024 * 768

这是我的代码使用bootstrap类：

<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类的相应行。 请注意，我已为表单组类

添加了col-md-x

Answer 3

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

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

**此外，您可以将“col-xs-12 col-md-12 col-lg-12”合并到“col-xs-12”，因为bootstrap从小到大。 （实际上，你可能没有，因为col - * - 12是默认的，但是如果你将改变这条路，那么对于经验较少的开发者来说这可能是有用的。）

您可以在下面看到类别和尺寸，复制/粘贴http://getbootstrap.com/css/#grid-media-queries以便您查看。

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

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

/ *大型设备（大型台式机，1200px及以上）* / @media（min-width：@ screen-lg-min）{...}