Bootstrap 如何在div中居中输入组？

fnatzsnv 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(228)

我想在<div>中将.input-group居中。当我使用center-block类时，<span>占据了整个宽度，并将其下方的输入字段向下推。我想将它们一起居中。

<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
     <div class="input-group input-group-lg inv-amount-block">
         <span class="input-group-addon" id="inv-rs">Rs</span>
         <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
     </div>
 </div>

我想把它们集中在一起，就像它们在默认情况下的样子。
这里是fiddle

twitter-bootstrap

来源：https://stackoverflow.com/questions/42452477/how-to-center-input-group-inside-a-div

4条答案

按热度按时间

zy1mlcev1#

使用显示器：input-group-text元素网格。

<div class="input-group">
    <div class="form-floating" style="width: 85%;">
        <input type="text" class="form-control" id="abc" placeholder="Description">
        <label for="abc">Description</label>
    </div>
    <div class="input-group-text" style="display: grid; width: 15%;">Hello</div>
</div>

赞(0）回复(0）举报 2022-12-07

sdnqo3pr2#

只需更改.center-block的CSS中的display属性
编辑：display: block和display: table之间的区别是- . display: block-将扩展到100%的可用空间，而display: table-将只与其内容一样宽。
因此，在后一种情况下，span和input field将仅与其内容一样宽，而不会占用指定的整个40%宽度。
第一个

赞(0）回复(0）举报 2022-12-07

efzxgjgh3#

在Bootstrap 4中，center-block已替换为mx-auto，并且input-group已更改为display:flex。以下是如何在Bootstrap 4中居中...

<div class="col-12">
          <div class="input-group input-group-lg w-25 mx-auto">
                <div class="input-group-prepend">
                    <span class="input-group-text">Rs</span>
                </div>
                <input type="text" class="form-control" placeholder="Your Amount">
          </div>
    </div>

请记住，input-group将填充父对象的宽度，因此在本例中，我添加了w-25（宽度：25%）来演示居中。
Demo on Codeply

赞(0）回复(0）举报 2022-12-07

ruyhziif4#

复制以下代码并粘贴到您文件中，然后运行，检查此输入框是否居中对齐，是否也有响应
此示例基于bootstrap v3.4

<!DOCTYPE html>
<html>

<head>
  <title>Center Input box demo</title>
  <link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <form class="row" action="" method="post" id="search_project_form">
      <div class="col-md-4 col-sm-2 col-sm-offset-4 col-xs-offset-2">
        <input type="text" name="search_group" id="search_group" class="form-control" placeholder="Group Number" required>
      </div>
      <button type="submit" class="btn btn-primary">Download Data</button>
    </form>
  </div>

</body>
</html>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何在div中居中输入组？

4条答案

相关问题

热门标签

最新问答