使用 Bootstrap 3 在提交按鈕內放置圖標

Question

我正在嘗試使用 Bootstrap 3 實現如下圖所示的效果。

在此處輸入圖片說明

如您所見，搜索按鈕是：

1）在輸入里面

2) 使用字形設計，以免看起來像“按鈕”。

如何使用 Bootstrap 3 實現類似的效果？ 我想在文本輸入的末尾放置一個帶有放大鏡圖標的按鈕，但是該按鈕一直出現在輸入下方而不是輸入內部。

Answer 1

一個帶有position: relative;的包裝 div position: relative; 然后使用position: absolute;將提交按鈕定位在頂部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;
}

Answer 2

嘗試這個。

在引導程序中，您必須使用按鈕類型提交而不是輸入類型； 兩者都工作正常！ 在引導程序中使用按鈕！

 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>

Answer 3

問題是因為按鈕遵循正常的 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>

使用 Bootstrap 3 在提交按鈕內放置圖標

問題描述

3 個解決方案

解決方案1
9 已采納 2014-07-27 21:40:29

解決方案2
4 2014-07-27 21:19:14

解決方案3
1 2014-07-27 21:26:33

使用 Bootstrap 3 在提交按鈕內放置圖標

問題描述

3 個解決方案

解決方案1 9 已采納 2014-07-27 21:40:29

解決方案2 4 2014-07-27 21:19:14

解決方案3 1 2014-07-27 21:26:33

解決方案1
9 已采納 2014-07-27 21:40:29

解決方案2
4 2014-07-27 21:19:14

解決方案3
1 2014-07-27 21:26:33