Question

我有2个<input>字段彼此相邻。我想要实现的东西类似于Bootstrap中的类class="input-group-addon" - 不幸的是它只适用于<span>。如何将这些输入合并为一个？

这就是我要找的：

Answer 1

试试这个的CSS：

#firstInput {
  width: 30%;
  display: inline-block;
  float: left;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#secondInput {
  width: 70%;
  display: inline-block;
  float: left;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left:0px;
}

和HTML：

<div class="form-group">
  <label for="firstInput">First Input</label>
  <div>
    <input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control">
    <input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control">
  </div>
</div>

Answer 2

链接https://jsfiddle.net/DTcHh/30252/

<div class="row">
  <div class="col-md-2">
    <div class="form-group">
      <input 
       type="text"
       id="firstInput" 
       name="firstInput" 
       ng-model="obj.firstInput" class="form-control">
      <input 
       type="text" 
       id="secondInput" 
       name="secondInput" 
       ng-model="obj.secondInput" class="form-control">
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="input-group">
      <input id="numbers" name="numbers" type="number" ng-model="obj.num" class="form-control" min="0" />
      <span class="input-group-addon">%</span>
    </div>
  </div>
</div>

body {
  margin: 10px;
}

#firstInput, #secondInput {
  float: left;
  width: 50%;
}

#firstInput {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

#secondInput {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Answer 3

使用自定义CSS尝试这样的事情：

<强> CSS：

.input-group .form-control {
  width:45%;
  margin-right:0%;
}

<强> HTML：

<div class="input-group">
    <input type="text" class="form-control" id="exampleInput"
    placeholder="fname">
    <input type="text" class="form-control" id="exampleInput1"
    placeholder="lname">

DEMO

另一种不完全但相似的方式可以使用form-inline。

.form-group{
float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-inline">
  <div class="form-group" style="float:left;">
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;">
  </div>
  <div class="form-group" >
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-left:0px;">
  </div>
</div>

Answer 4

合并引导程序的表单控件/输入字段

.form-control{
border-radius: 0 !important;
}
.input-group .form-control {
  margin-right:0%;
  width:50% !important;
  /* width:100px !important;*/
}
.input-group .form-control:last-child{
margin-left:-1px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
    <div class="input-group">
      <input type="text" class="form-control">
      <input type="text" class="form-control">
    </div>
</div>


</body>
</html>

Answer 5

https://jsfiddle.net/DTcHh/30255/

使用以下css获取所需的输出

.form-group {
  float: left;
}
.form-group #secondInput{
      margin-top: 4px;
      border-radius:0;
      width: 300px;
}

.form-group #firstInput{
      border-radius:0;
      width: 100px;
}

Answer 6

试试这个：

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
    <div class="form-group">
      <label for="firstInput"></label>
      <input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control" style="border-radius:0">
    </div>
</div>

  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
    <div class="form-group">
      <label for="secondInput"> </label>
      <input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control" style="border-radius:0">
    </div>
  </div>
</div>

如何使用bootstrap css将2个输入合并为1？

6 个答案: