使用Bootstrap 3将图标放置在提交按钮内

Question

使用Bootstrap 3将图标放置在提交按钮内

htmlcsstwitter-bootstrap-3twitter-bootstrap-form

8

我正在尝试使用Bootstrap 3实现下面截图中显示的效果。

如您所见，搜索按钮既在输入框内，又使用了glyphicon进行样式设置，以避免其看起来像一个“按钮”。

我该如何使用Bootstrap 3实现类似的效果？我想在文本输入框的末尾放置一个带有放大镜glyphicon的按钮，但是该按钮一直出现在输入框下方而非内部。

- tdc

2

你试过这个吗？http://getbootstrap.com/components/#input-groups-buttons - naveen

3个回答

3

试试这个。

在Bootstrap中，您必须使用按钮类型submit而不是输入类型；两者都可以正常工作！在Bootstrap中使用按钮！

div {
  padding: 15px;
  background: #000;
}
.btn {
  text-align: left !important;
  font-size: 12px !important;
  padding: 20px 12px !important;
  width: 200px !important;
  color: #888 !important;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div>
<button type="submit" class="btn btn-default">
  awesomeness <span class="glyphicon glyphicon-search pull-right"></span> 
</button>
  <div>

或者查看这个示例

<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span> 
</button>

- Suresh Karia

1

这不是我想要的效果。我正在尝试在文本输入框内放置一个按钮。 - tdc

1

问题是由于按钮遵循html的正常流程，因此出现在第一个元素下面。你需要将输入框和搜索按钮都包裹在一个div中，然后使搜索按钮绝对定位。然后，您可以在单击函数上添加一些jQuery功能来实现所需的事件。

<html>
<body>

    <div>
        <input type="text" value="test"/>
        <span id="search" class="absolute">x</span>
    </div>
  

 <style>
    .absolute {
       position:absolute;
       top:9px;
       left:115px;
             }

 </style>

 <script>
    $(document).on('click','#search',function(){
     //some functionality
    }

 </script>


</body>

</html>

- hugorut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niklas · Accepted Answer

使用position: relative;的包装div，然后使用position: absolute;将提交按钮定位在顶部。如下所示：

http://jsfiddle.net/VtP5k/

HTML

<form>

    <div id="search">

        <input type="text" />
        <button type="sutmit">Search</button>

    </div>

</form>

CSS

#search {
    position: relative;
    width: 200px;
}

#search input {
    width: 194px;
}

#search button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px 0;
}