Bootstrap 中的响应式标题布局问题：在移动视图中对齐徽标和搜索栏

问题描述 投票：0回答：1

我目前正在使用 Bootstrap 构建响应式标头。该布局在桌面版本上运行良好，但在移动视图中遇到一些对齐问题。以下是我想要实现的目标和面临的问题的简要描述：

搜索栏由两个 div 元素组成：Input type="text" 和 Input type="submit"

  • -我希望输入 type="text" 占据可用宽度的 80% 并左对齐。
  • 提交按钮应占据剩余的 10% 并向右对齐（我们留下 10% 的边距）。

我尝试使用 Bootstrap 的 d-flex、justify-content 和 text-end 类，但它没有生成所需的布局。 这是我当前的代码：

<header class="container-fluid">
    <div class="row align-items-center">
        <!-- Logo Column -->
        <div class="col-md-6 col-xs-12 d-flex">
            <img src="../logo_msp_Part.png" alt="Logo" class="logo">
        </div>

        <!-- Spacer Column (Visible in Desktop only) -->
        <div class="col-3 d-none d-md-block"></div>

        <!-- Search Bar Columns -->
        <div class="col-2 justify-content-start">
            <form>
                <input type="text" class="form-control w-200" placeholder="Rechercher" id="rechercheInput">
            </form>
        </div>
        <div class="col-1">
            <input type="submit" value="ok" class="btn btn-primary" id="ok_recherche">
        </div>
    </div>
</header>

我尝试调整 col-* 类的宽度以确保列成比例。 在输入字段上使用 d-flex 和 justify-content-start/justify-content-end 类。 使用 w-100 和 w-80 类来尝试控制文本输入和提交按钮的宽度。 我还删除了有关媒体查询中标头的 css，以避免 css 和 bootstrap 发生冲突。

css bootstrap-4
1个回答
0
投票

我认为你不需要一个空列，分隔元素很好，但它也限制了元素可以增长的程度，还有其他两种可能性：

  1. 使用 offset-* 将搜索元素和按钮对齐到末尾（https://getbootstrap.com/docs/5.3/layout/columns/#offsetting-columns），它将在元素之间创建空间，但它可能会导致元素在某些维度上脱离其列。如果您确定您的元素永远不会溢出其父容器，则此选项是不错的选择。
  2. 为搜索元素的父级提供更大的列宽度，限制搜索元素的尺寸。如果您或多或少了解搜索栏的尺寸，这是一个不错的选择，它将更容易适应较小的尺寸。这就是我用于建议解决方案的内容

首先，我想您希望将按钮和搜索栏放在一起，输入组类允许将元素集成在一起，如果不是这种情况，请忽略我使用的输入组，尽管它们需要在同一列下一起放在最后。

我将输入搜索和按钮元素分组，使它们位于同一列中，并且可以使用父级的 Flex 设置到末尾。搜索元素需要设置为 inline-block 并指定宽度以限制其使用所有宽度并使两个元素位于同一行。

最后，要在手机中拥有尺寸，两个元素、徽标和搜索栏的容器都需要有一个 col-* 类型的类，如果它们没有此类，则它们的宽度将与给定的 col- 12.

#rechercheInput {
  width: 80%;
  display: inline-block;
}

#form {
  width: 300px;
}
<html lang="en" class="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <header class="container-fluid">
    <div class="row align-items-center">
      <!-- Logo Column -->
      <div class="col-4 col-md-6 col-xs-12 d-flex">
        <img src="../logo_msp_Part.png" alt="Logo" class="logo">
      </div>

      <!-- Search Bar Columns -->
      <div class="col-8 col-md-6 d-flex justify-content-end">
        <form id="form">
          <div class="input-group">
            <input type="text" class="form-control w-200" placeholder="Rechercher" id="rechercheInput">
            <input type="submit" value="ok" class="btn btn-primary" id="ok_recherche">
          </div>
        </form>
      </div>
    </div>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.