css Bootstrap 4 -调整输入字段的宽度

8yoxcaq7 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(3)|浏览(200)

使用这个启动器模板，我如何控制输入宽度的宽度？
https://getbootstrap.com/docs/4.1/examples/starter-template/
这是我想做小一点的部分

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

我尝试将输入 Package 在div <div class="col-xs-2">中，但没有任何效果。我有什么选择？

css

来源：https://stackoverflow.com/questions/53023474/bootstrap-4-adjust-width-of-input-field

3条答案

按热度按时间

00jrzges1#

管理输入域宽度的最简单的方法是将w-25类添加到输入域。

<input class="form-control w-25" type="text" placeholder="Search" aria-label="Search">

您可以根据需要设置宽度w-25w-50w-75 & w-100或w-auto
w以百分比定义宽度。

赞(0）回复(0）举报 2023-06-25

eulz3vhy2#

方案一：为输入元素指定“max-width”：

input[type=text] {
  max-width: 200px;
}

input[type=button] {
  max-width: 100px;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">

<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>

方案二：或者尝试在select和input中添加col-* 类。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<form class="row">
  <div class="col-10">
    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
  </div>
  <div class="col-2">
    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
  </div>
</form>

赞(0）回复(0）举报 2023-06-25

rvpgvaaj3#

你可以在CSS文件中这样做：

CSS代码放入css文件或放入样式标签