html - 如何使用 Bootstrap 水平对齐组件？

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-md-*”类才能显示样式。

您可以在此处查看 Bootstrap 媒体查询: 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(最小宽度:@screen-sm-min){ ... }

/* 中型设备(桌面，992px 及以上)*/ @media(最小宽度:@screen-md-min){ ... }

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