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

Posted 2023-02-23

【中文标题】如何使用引导程序水平对齐组件？

【英文标题】：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>

【参考方案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