Question

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <div class="input-group">
      <input list="absolventini" id="search-absolvent-form-input" class="form-control">
      <span class="input-group-btn">
    				<button class="btn btn-default" type="submit">
    					<i class="glyphicon glyphicon-search"></i>
    				</button>
    			</span>
      <datalist id="absolventini">
        <option value="1">
          <option value="2">
            <option value="3">
      </datalist>
    </div>
  </div>
</form>

<form>
  <div class="form-group">
    <div class="input-group">
      <input type="text" id="search-absolvent-form-input" class="form-control">
      <span class="input-group-btn">
    				<button class="btn btn-default" type="submit">
    					<i class="glyphicon glyphicon-search"></i>
    				</button>
    			</span>
    </div>
  </div>
</form>

＆＃13;

这是fiddle演示。第二个输入（文本）在输入字段内有搜索图标。第一个输入（datalist）图标在外面。我希望它在里面。

Answer 1

所以这背后的原因是下面的样式被应用于第二种形式的按钮而不是应用于第一种形式的按钮，因为如果你看到下面的样式适用于表单的最后一个子项/ input-grp和.btn类，但在第一种形式datalist是最后一个孩子而不是按钮。

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,
.input-group-btn:first-child>.btn:not(:first-child),
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group>.btn,
.input-group-btn:last-child>.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

因此，解决方法是将数据列表移到span标记之上，两个按钮看起来都像输入字段一样。下面是相同的演示。这是更新的 Fiddle

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <div class="input-group">
      <input list="absolventini" id="search-absolvent-form-input" class="form-control">
      <datalist id="absolventini">
        <option value="1">
          <option value="2">
            <option value="3">
      </datalist>
      <span class="input-group-btn">
    	<button class="btn btn-default" type="submit">
    		<i class="glyphicon glyphicon-search"></i>
    	</button>
     </span>
    </div>
  </div>
</form>

<form>
  <div class="form-group">
    <div class="input-group">
      <input type="text" id="search-absolvent-form-input" class="form-control">
      <span class="input-group-btn">
    	<button class="btn btn-default" type="submit">
    		<i class="glyphicon glyphicon-search"></i>
    	</button>
     </span>
    </div>
  </div>
</form>

＆＃13;

另一个解决方案是定义一个类：

.input-btn-inside{
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

如果您没有将按钮作为.input-group的最后一个孩子

，请将此按钮应用于您的按钮

希望有所帮助：）

数据列表输入字段内的BS按钮？

1 个答案: