Question

我想将.input-group置于<div>内。当我使用类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

Answer 1

只需更改CSS

的.center-block中的显示属性即可

已编辑：display: block与display: table之间的区别在于 - 。 display: block - 将扩展到100％的可用空间，而display: table - 只会扩展到其内容。

因此，在后一种情况下，您的span和input field只会与其内容一样宽，并且不会占用指定的整个40%宽度。

.center-block {
    display: table;  /* Instead of display:block */
    margin-left: auto;
    margin-right: auto;
}

              <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

                <div class="input-group input-group-lg inv-amount-block center-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><br>
              
                            <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>

Answer 2

在 Bootstrap 4 中，center-block已替换为mx-auto，输入组已更改为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

如何将div中的输入组居中？

2 个答案: