Question

感谢您查看我的问题。

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

所以我试图在这里做的是在文本框中添加一个下拉列表，下拉列表由几个标志组成，我需要输入在文本输入中，如下所示：

我得到的是一个单独的下拉列表和文本输入，它在视觉上看起来不太合适。有点像这样＆gt;

这是我到目前为止的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

基本上，您需要关注具有类cabal install --dependencies-only的{{1}}。你可以在那里放置旗帜的图像。

div

Answer 2

将整个.input-group包装在某个容器中，并将边框应用于该父div。从其他一切中删除边框。 JSFIDDLE DEMO 例如：

HTML

<div class="input-container">
    <div class="input-group">
        ....
    </div>
</div>

CSS

.input-container {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
}
.form-control {
  border: 0;
  box-shadow: none;
}
.input-group-btn .btn {
  border: 0;
}

如何在Bootstrap的文本输入中添加下拉菜单？

2 个答案: