html - 如何将下拉菜单添加到 Bootstrap 中的文本输入？

Question

感谢您查看我的问题。

我正在使用 Bootstrap，我确信有一个简单的解决方案，请帮忙!

所以我在这里要做的就是在文本框中添加一个下拉列表，该下拉列表由几个标志组成，我需要将输入完全包含在文本输入中，如下所示:

我得到的是一个单独的下拉菜单和文本输入，在视觉上看起来不太吸引人。有点像这样>

这是我目前的 HTML:

<div class="form-group" style="margin-top:40px;">
       <label for="sms-send"><strong>SEND VIA SMS:</strong></label>
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default btn-outline dropdown-toggle"
                  data-toggle="dropdown" aria-expanded="false" style="background-color:white; border-right:none;">
                    <img src="aus-flag.png">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="aus-flag.png"></a></li>
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="us-flag.png"></a></li>
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="mexico-flag.jpg"></a></li>
                  </ul>
                </div>
                <input type="text" class="form-control" style="border-left:none;">
                <span class="input-group-btn">
                   <button type="submit" class="btn btn-primary btn-green form-control">SEND</button>
                </span>
              </div>
            </div>

如果您能提供任何帮助，我将不胜感激! 谢谢!

Answer 1

这样的事情会有帮助吗？ Bootply Link

基本上，您需要关注具有类 .input-group-addon 的 div。这就是您可以放置​​旗帜图像的地方。

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">
        <select>
          <option>First</option> <!-- Replace it with images of your choice -->
          <option>Second</option>
        </select>
      </div>
      <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>