输入组内的Bootstrap按钮与输入分离

时间：2017-02-09 18:04:43

标签： twitter-bootstrap

问题描述

我有一个简单的代码，我想在输入的右边显示两个按钮。但按钮出现＆＃34;分离＆＃34;从输入。我不想玩负利润。

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-4">
  <div class="input-group">
    <input type="text" class="form-control" />
    <span class="input-group-btn">                                            
      <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
      <button type="button" class="btn btn-default"><i class="fa fa-history"></i></button>
    </span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

结果如下

enter image description here

尝试解决方案

我试图将输入放在span.input-group-btn中。它然后使按钮坚持输入，但我放弃了输入自动调整大小的好处，并且在移动分辨率下，我得到类似的东西：

enter image description here

2 个答案:

答案 0 :(得分：1)

虽然我运行你的代码时它对我来说很好。但我要为你包括另一个庙宇。这就是我这样做的方式。

工作示例

＆＃13;
＆＃13; 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          </head>
          <body>
          <div class="col-md-4">
 <div class="form-group">
       <div class="input-group">
        <input type="text" class="form-control" style="height: 54px;"/>
        <span class='input-group-addon'>
    <button type="button" class="btn btn-default"><i class="fa fa-calendar" style="font-size:16px;"></i></button>
            <button type="button" class="btn btn-default"><i class="fa fa-history" style="font-size:16px;"></i></button>
</span>
        </div>
        </div>
        </div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这已经很老了，但我刚遇到这个问题，想发帖说如果有人先来这里而不是去https://getbootstrap.com/docs/4.0/components/input-group/ 

<DataTemplate DataType="{x:Type local:MyType}">
相关问题
最新问题