Question

我在输入组中有2个文本框，由input-group-addon span分隔。我的问题是，我希望文本框1比文本框2宽。文本框1应该是电话号码（更大），文本框2是分机号码（更细）。我有一个小提琴：

oldsite.com/category/tools/makita  ===> newsite.comcategory/tools/makita

谢谢！

Answer 1

您可以为表单设置宽度

＆＃13;

<div class="col-xs-6">
 <div class="input-group">
  <input class="form-control" type="tel" placeholder="Phone Number" />
  <span class="input-group-addon">Ext.</span>
  <input class="form-control" type="text" placeholder="Extension" style="width : 20px;"/>
 </div>
</div>

＆＃13;

或使用css

Answer 2

您需要将输入标记放在带有col-xs - *。

的div中

#phoneField .col-xs-3{
  padding:0;
}
#phoneField .col-xs-3::after{
  content: "-";
  position:absolute;
  margin:5px;
}

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-6">
  <div id="phoneField" class="input-group">
   <div class="col-xs-3">
    <input class="form-control" type="text" placeholder="Ext" maxlength="3"/>
    </div>
   <div class="col-xs-9">
    <input class="form-control" type="tel" placeholder="Phone Number" maxlength="10"/>
    </div>
   </div>
</div>
</body>
</html>

Bootstrap输入组多个文本框宽度

2 个答案: