Question

嗨，我正在使用引导程序4

我试图掌握bootstrap4的网格功能，在练习中，我尝试显示一行搜索字段和一些按钮（过滤器+添加按钮），如图1所示，我的目标是做到这一切在搜索字段，过滤器和“添加”按钮之间留一点空间。

这就是我想正确知道的：

    <div class="row mb-4">
        <div class="col-xl-9">
            <div class="col-xl-7">
                <input type="search" class="form-control col-xl-11  " autocomplete="off"
                    placeholder="{{'autoEcoleV01App.constants.search' | translate}}" [(ngModel)]="searchValue" />
            </div>
            <div class="col-xl-5 ">
                <button class="btn  float-left btn-outline-secondary col-xl-4  " jhiSortBy="nom">
                    <span jhiTranslate="autoEcoleV01App.candidat.nom">Nom</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
                <button class="btn  float-left btn-outline-secondary col-xl-4" jhiSortBy="prenom">
                    <span jhiTranslate="autoEcoleV01App.candidat.prenom">Prenom</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
                <button class="btn  float-left btn-outline-secondary col-xl-4  " jhiSortBy="nid">
                    <span jhiTranslate="autoEcoleV01App.candidat.nid">Nid</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
            </div>
        </div>
        <div class="col-xl-3">
            <button id="jh-create-entity"
                class="btn btn-primary  float-right jh-create-entity create-candidat col-xl-11   "
                [routerLink]="['/candidat/new']">
                <fa-icon [icon]="'plus'"></fa-icon>
                <span jhiTranslate="autoEcoleV01App.candidat.home.createLabel">
                    Create new Candidat
                </span>
            </button>
        </div>
    </div>

这是由于以下原因造成的：

即使我注意每个孩子的总和都不会超过12列大小，我也不明白为什么我的过滤器不在空白处！

Here is a fiddle reproduction of my issue

Answer 1

您的代码中有不必要的div，并且代码中有些复杂

我的解决方案是从引导网格创建的 Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的。

在我的解决方案中，您可以设置一列的宽度，并使同级列自动调整其大小。您还可以预定义引导类。

希望有帮助

FNULL = open(os.devnull, 'w')
args = 'E:\\OpenVPN\\bin\\openvpn-gui.exe --connect ' + server + '.udp.ovpn'
subprocess.Popen(args, stdout=FNULL, stderr=FNULL, shell=False)

您可以改善网格布局有更多相同的示例：https://getbootstrap.com/docs/4.1/layout/grid/

为什么我的筛选器按钮返回到行？

1 个答案: