当前位置： 文江博客话题详情

在引导程序中，应将单独的输入字段放在自己的col中或共享col以使它们保持在一起，正确合理

发布于 2025-02-11 16:11:13 字数 8649 浏览 1 评论 0原文

在引导程序中，应将单独的输入字段放在自己的col中，或共享col以使它们保持在一起，正确合理。

我有一个组合和输入，我想在屏幕右侧的同一行上显示我的组合和输入。如果我将其放在col-4中

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-4 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

如果我放置自己的Col-2，则它们将彼此显示在彼此的顶部

，然后只有第二个是正确的，另一个是在中心

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 ms-auto m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

我还尝试将style =“ display：inline”添加到输入字段，但没有区别。正确的方法是什么？

看来选择元素将使用所有可用空间，因此，在第一种情况下，如果我使用了大量的列（例如Col-8），那么所有这些空间都将在第一个空间始终使用选择，切勿与文本输入字段共享

更新

Cervus的答案似乎有效，除非我需要保留MS-Auto或第一列会扩展以扩展到整个，为什么，这是我的代码

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col col-auto m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 col-auto m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

如果我删除了Col-Auto，我的第一列太宽了

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

原文

In Bootstrap should separate input fields be put inside their own col or share col to keep them together, right justified.

I have a combo and input that I want to be shown on the same row on the right-hand side of the screen. If I put it together in a col-4

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-4 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

they are shown on top of each other

If I put in their own col-2s then only the second one is right-justified, the other one is in the center

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 ms-auto m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

I also tried adding style="display: inline" to the input field but made no difference. What is the correct way of doing this?

It seems that select elements will use all the available space, so in the first case, if I used a larger number of columns (e.g col-8) then all that space will always be used by the first select, never shared with the text input field

Update

Answer from Cervus seems to work, except I need to keep ms-auto or first column will just expand to take up whole, why is that, this is my code

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col col-auto m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 col-auto m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

If I remove col-auto I get first column too wide

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

奶气 2025-02-18 16:11:13

解决方案

非常容易，您很接近。请执行以下操作：

  1. 从两个col-2元素中删除类MS-AUTO。
  2. 将类d-flex Align-items-center添加到第二个col-2元素，以垂直为内容中心。

请参阅下面的摘要。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 d-flex align-items-center m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">Filter</span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

更新

set 最大宽度：280px！estigest;到第一列。

请参阅下面的摘要。

#first_column {
    max-width: 280px !important;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <span class="col m-2" id="first_column">
    <span class="input-group">
        <label class="input-group-text" for="sort_list">
            Sort By
        </label>
        <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
            <option value="sortname_asc">
                Sort Name Up
            </option>
            <option value="sortname_desc">
                Sort Name Down
            </option>
            <option value="name_asc">
                Name Up
            </option>
            <option value="name_desc">
                Name Down
            </option>
        </select>
    </span>
  </span>
  <span class="col-2 m-2" id="second_column">
    <span class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
          Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </span>
  </span>
</div>

The solution

It's very easy, you were close. Do the following:

  1. Remove the class ms-auto from both col-2 elements.
  2. Add classes d-flex align-items-center to the second col-2 element to center the content vertically.

See the snippet below.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 d-flex align-items-center m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">Filter</span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

UPDATE

Set max-width: 280px !important; to the first column.

See the snippet below.

#first_column {
    max-width: 280px !important;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <span class="col m-2" id="first_column">
    <span class="input-group">
        <label class="input-group-text" for="sort_list">
            Sort By
        </label>
        <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
            <option value="sortname_asc">
                Sort Name Up
            </option>
            <option value="sortname_desc">
                Sort Name Down
            </option>
            <option value="name_asc">
                Name Up
            </option>
            <option value="name_desc">
                Name Down
            </option>
        </select>
    </span>
  </span>
  <span class="col-2 m-2" id="second_column">
    <span class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
          Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </span>
  </span>
</div>

回复 原文
岁月打碎记忆 2025-02-18 16:11:13

这将两个输入字段都放在同一行上，并且应该证明其合理性。这会做您期望的吗？

<div class="container">
  <div class="row justify-content-end">
    <div class="input-group m-2 col-4">
      <select id="sort_list" class="form-select form-control">
        <option value="sortname_asc">
          Sort by Sortname ascending
        </option>
        <option value="sortname_desc">
          Sort by Sortname descending
        </option>
        <option value="name_asc">
          Sort by Name ascending
        </option>
        <option value="name_desc">
          Sort by Name descending
        </option>
      </select>
      <span for="filter" id="filterlabel" class="input-group-text">
        Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

This puts both input fields on the same row and it should justify it to the right. Does this do what you are expecting?

<div class="container">
  <div class="row justify-content-end">
    <div class="input-group m-2 col-4">
      <select id="sort_list" class="form-select form-control">
        <option value="sortname_asc">
          Sort by Sortname ascending
        </option>
        <option value="sortname_desc">
          Sort by Sortname descending
        </option>
        <option value="name_asc">
          Sort by Name ascending
        </option>
        <option value="name_desc">
          Sort by Name descending
        </option>
      </select>
      <span for="filter" id="filterlabel" class="input-group-text">
        Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>
回复 原文
~没有更多了~

关于作者

终止放荡

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文