Question

我不知道如何做到这一点，因为BS 4不支持glyphicons。我是将其设置为背景还是将不同的定位应用于字体真棒图标？

到目前为止，这是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->

我想使用此font-awesome icon。我也尝试将其添加为background-image，如：

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

但这没有任何作用。我能想到的唯一方法是添加font-awesome图标，然后将定位设置为绝对，对吧？但我不确定这是否是“干净”和正确的方法呢？我需要采取不同的方法吗？有人帮忙！谢谢！

Answer 1

更新2019

为什么不使用输入组？

<div class="input-group col-md-4">
      <input class="form-control py-2" type="search" value="search" id="example-search-input">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
</div>

，你可以使用border utils使在里面输入...

<div class="input-group col-md-4"> <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary border-left-0 border" type="button"> <i class="fa fa-search"></i> </button> </span> </div>

或，使用input-group-text w / o灰色背景，以便图标显示在输入内...

<div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div> </span> </div>

或者，您可以使用没有装订线间距的网格（row＆gt; col-）：

<div class="row no-gutters"> <div class="col"> <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4"> </div> <div class="col-auto"> <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button"> <i class="fa fa-search"></i> </button> </div> </div>

或者，预先这样的图标......

<div class="input-group"> <span class="input-group-prepend"> <div class="input-group-text bg-transparent border-right-0"> <i class="fa fa-search"></i> </div> </span> <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" /> <span class="input-group-append"> <button class="btn btn-outline-secondary border-left-0 border" type="button"> Search </button> </span> </div>

Demo of all Bootstrap 4 icon input options

Example with validation icons

Answer 2

您也可以使用input-group

这样做

<div class="input-group">
  <input class="form-control"
         placeholder="I can help you to find anything you want!">
  <div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>

codeply

Answer 3

我使用下拉菜单制作了另一个变种（可能用于高级搜索等）。这是它的样子：

<div class="input-group my-4 col-6 mx-auto"> <input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input"> <span class="input-group-append"> <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <button class="btn btn-outline-primary rounded-right" type="button"> <i class="fas fa-search"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </span> </div>

注意：屏幕截图中显示为绿色，因为我的网站主题为绿色。

Answer 4

在ASPX bootstrap v4.0.0中，没有beta（dl 21-01-2018）

Public Class Stock
    Dim a As New Module1
    Dim rs As ADODB.Recordset
    Dim category, item As String
    Private Sub Stock_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        a.Connect()
        rs = New ADODB.Recordset
        rs.Open("SELECT * FROM Stock", a.cn)'this line show error'
        rs.MoveFirst()
        While rs.EOF <> True
            ComboBox1.Items.Add(rs.Fields("Item_Category").Value)
            rs.MoveNext()
        End While
    End Sub

Answer 5

这是一个右侧有搜索图标的输入框。

  <div class="input-group">
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
      <div class="input-group-append">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
  </div>

这是一个左侧有搜索图标的输入框。

  <div class="input-group">
      <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
  </div>

Answer 6

这是一种非常简单的方法，可以通过在相对位置的div内同时包含放大镜图标和输入字段。

绝对定位应用于图标，这使它脱离了常规文档布局流程。然后，将图标放置在输入中。左填充应用于输入，以便用户输入显示在图标的右侧。

请注意，此示例将放大镜图标放置在左侧而不是右侧。当使用<input type="search">时，建议使用此选项，因为Chrome在搜索框的右侧添加了X按钮。如果我们将图标放在那里，它将覆盖X按钮，看起来很丑。

这是所需的Bootstrap标记。

<div class="position-relative">
    <i class="fa fa-search position-absolute"></i>
    <input class="form-control" type="search">
</div>

...以及一些CSS类，这些类我无法通过Bootstrap类实现：

i {
    font-size: 1rem;
    color: #333;
    top: .75rem;
    left: .75rem
}

input {
    padding-left: 2.5rem;
}

您可能不得不摆弄top，left和padding-left的值。

使用图标Bootstrap 4搜索输入

6 个答案: