Question

我在导航栏中有一个由表单包围的输入字段，我想将表单的大小减小到当前容器宽度的75％。

如果没有<form></form>，则输入内容恰好是其所在容器的75％，看起来很完美。

不完整的Navbar HTML代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
        <div class="container" id="home">
            <form method="post">
                <div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
                    <input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
            <button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

我尝试过的CSS代码：

#search {
    max-width: 75%;
}

form {
    width: 75%;
}

该表格不会更改大小，并且无论屏幕宽度如何，其大小均保持不变。

Answer 1

对我很好：

.container{
  width: 100%;
  background: tomato;
}

#search {
    max-width: 75%;
}

form {
    width: 75%;
  background: gray;
  margin: 0 auto;
}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
        <div class="container" id="home">
            <form method="post">
                <div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
                    <input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
            <button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

Answer 2

我想我理解你的意思：
更改

container

到

container-fluid

使用CSS更改HTML <form>的宽度

2 个答案: