Question

我正在设计一些页面，其中我创建了一行，其中包含两个文本输入和一个锚标记，但为什么锚标记不会与文本输入位于同一行。

<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

由于默认col-12以及col-sm-4类中的padding-right属性，它正在崩溃。如果你减小屏幕尺寸，它最终会破裂。

最好用以下CSS覆盖该类：

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

这是工作Fiddle

Answer 2

您是否考虑过使用.input-group类，这样您就可以将模态触发器（作为旁注;可能应该是<button>）与input结合使用？

以下是Bootstrap 4中该布局的示例;它可能与您的设计完全不符，因为我已经取消了所有的自定义设置并仅使用Bootstrap 4结构进行了展示。

＆＃13;

<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>

＆＃13;

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

2 个答案: