Question

通过使用Bootstrap类为用户输入创建了一个表单。我已将简单表格包含在内，供您阅读。

问题：

1。）我试图将glyphicon放在表单的输入框中，但是图标放在外面。我在输入标记类中调用了glyphicon glyohicon-date，但图标放在输入框之外。我怎么可能在输入框内输入它？

感谢。

＆＃13;

<div class="row row-content">
  <div class="col-xs-12 col-lg-3">
    <p style="padding:20px;"></p>
    <h3 align=center>Reserve A Table</h3>
  </div>
  <div class="col-xs-12 col-sm-9">

    <form class="form-horizontal" role="form">

      <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">Number of Guests</label>

        <div class="input-group col-sm-4">
          <input type="radio">
          <span> 1  </span>
          <input type="radio">
          <span> 2  </span>
          <input type="radio">
          <span> 3  </span>
          <input type="radio">
          <span> 4  </span>
          <input type="radio">
          <span> 5  </span>
          <input type="radio">
          <span> 6  </span>
        </div>
      </div>

      <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">Date & Time</label>
        <div class="col-sm-4">
          <input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
        </div>
        <div class="col-sm-4">
          <input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
        </div>
      </div>

      <button type="submit" class="btn btn-default">Reserve</button>
    </form>

    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
      </button>
      <strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
    </div>
  </div>
</div>

＆＃13;

Answer 1

设法从给定的链接解决了它：With optional icons

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
    <div class="group"><i class="arrow_maximize"></i> Title</div>
    <ul>
        <li>anything</li>
    </ul>
</li>

Answer 2

<div class="form-group form-inline">
                    <label for="datetime" class="col-sm-2 control-label">Date and Time</label>
                    <div class="col-sm-5">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
                            <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
                            <i class="glyphicon glyphicon-time form-control-feedback"></i>
                        </div>
                    </div>
                </div>

Answer 3

这是Bootstrap

的课程作业

使用＆＃34;使用可选图标＆＃34;在Bootstrap中你可以实现这个：

例如，我对这个问题的回答：

<div class="form-group has-feedback">
 <label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
 <div class="col-sm-5">
  <input type="date" class="form-control" id="date-choose" placeholder="Date">
  <i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
 </div>
</div>

您可以参考以下链接找到您想要的内容：

http://getbootstrap.com/css/#forms-control-validation

您必须知道的另一件事是，这只会将图标添加到输入框但不会更改其后面的JavaScript的默认操作，因此您添加的图标没有响应，除非您更改默认事件这个输入框。

如何在输入字段中包含glyphicon？

3 个答案: