Bootstrap 3输入附加麻烦

Question

抱歉我的英文。

嗨，面对Bootstrap 3中的问题，无法对两个文本字段和按钮进行分组。提示解决方案。

Answer 1

您可以这样做，使用输入组和两个输入字段，并添加一些css：

HTML：

<div class="input-group double-input">
    <input type="text" placeholder="First" class="form-control" />
    <input type="text" placeholder="Second" class="form-control" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div><!-- /input-group -->

CSS：

.double-input .form-control {
    width: 50%;
    border-right-width: 0px;
}
.double-input .form-control:focus {
    border-right-width: 1px;
}

检查这个小提琴：http://jsfiddle.net/aorcsik/TshQ7/

Answer 2

.input-group-addon{
  padding: 0;
  width: 0px;
  border:none;
  background-color: #ccc;
}
.input-group{
  width: 100%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group">
     <input data-provide="datepicker" class="form-control">
     <div class="input-group-addon"></div>
     <input data-provide="datepicker" class="form-control">
     <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</div>