将文本输入和锚定标记放在同一行

Question

我正在设计一些页面，其中我已经创建了两个文本输入和一个锚标签一行，但为什么锚标签不会坐在同一行与文本输入。

小提琴：https://jsfiddle.net/wb8vpbc3/13/

<div class="row floating-labels">
    <div class="col-4">
        <div class="form-group">
            <h5>Phone number <span class="text-danger">*</span></h5>
            <div class="controls">
                <input class="form-control input-sm" data-original-title="Enter Company Official website" data-placement="right" data-toggle="tooltip" data-validation-required-message="This field is required" id="txtUsername" maxlength="35" name="phoneNumber" required="" title="" type="text">
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="form-group">
            <h5>Extension <span class="text-danger">*</span></h5>
            <div class="controls">
                <input class="form-control input-sm" data-original-title="Enter Company Official website" data-placement="right" data-toggle="tooltip" data-validation-required-message="This field is required" id="txtUsername" maxlength="35" name="Extension number" required="" title="" type="text">
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="form-group">
            <a class="btn btn-info" data-target="#addPhoneModal" data-toggle="modal" href="javascript:void(0)">+</a>
        </div>
    </div>
</div>

Answer 1

您是否考虑过使用.input-group类，它允许您将模式触发器(作为附注；可能应该是<button>)与input组合在一起

下面是Bootstrap 4中的布局示例；它可能与您的设计不完全匹配，因为我已经取消了所有的定制，并仅使用Bootstrap 4结构来呈现它。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="card company mx-2 my-2">
  <p class="text-right mx-2 my-1"><a href="javascript:void(0)" class="text-info"><small>skip</small></a></p>

  <div class="card-body">
    <h4 class="card-title text-info text-center">Tell us more about your Company</h4>

    <form>
					
    <div class="form-row">
      <div class="form-group col-12 col-sm-6">
        <label for="phoneNumber">Phone number <sup class="text-danger">*</sup></label>
        <input type="text" name="phoneNumber" id="txtUsername" class="form-control input-sm" required data-validation-required-message="This field is required" maxlength="35" data-toggle="tooltip" data-placement="right" title="" data-original-title="Enter Company Official website">
      </div>

      <div class="form-group col-12 col-sm-6">
        <label for="Extension number">Extension <sup class="text-danger">*</sup></label>
        <div class="input-group">
          <input type="text" name="Extension number" id="txtUsername" class="form-control input-sm" required data-validation-required-message="This field is required" maxlength="35" data-toggle="tooltip" data-placement="right" title="" data-original-title="Enter Company Official website">
          <div class="input-group-btn">
            <a href="javascript:void(0)" class="btn btn-info" alt="default" data-toggle="modal" data-target="#addPhoneModal">+</a>
          </div>
        </div>
      </div>  
    </div>
    
    </form>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

​

Answer 2

这是因为默认col-12和col-sm-4类中的padding属性造成的。如果你缩小屏幕尺寸，它最终会坏掉。

最好用下面的CSS覆盖类：

.col-12,
.col-sm-4 {
  padding-right: 0px;
}

下面是有效的Fiddle