7

我正在尝试使用 Bootstrap 3 实现如下屏幕截图所示的效果。

在此处输入图像描述

如您所见，搜索按钮既是：

1）在输入内部

2) 用字形设计，以免看起来像“按钮”。

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

4

3 回答 3

9

一个包装器 div，position: relative;然后使用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;
}
于 2014-07-27T21:40:29.357 回答
4

尝试这个。

在引导程序中，您必须使用按钮类型提交而不是输入类型；两者都工作正常！在引导程序中使用按钮！

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>
于 2014-07-27T21:19:14.437 回答
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>
于 2014-07-27T21:26:33.593 回答