Question

我想添加一个Textfield input-group-addon。问题是，当我使用带有glyphicon的这个类时，图标不会位于textfield旁边，请看下面的图像。

也许某人对我有一些提示 - 为什么会这样？

FormWithWrongGlyphIcon

<!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="name2"></label>
            <div class="col-md-4">
                <input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">

            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Geschlecht</label>
            <div class="col-md-4">
                <label class="radio-inline" for="gender-0">
                    <input type="radio" name="gender" id="gender-0" value="1" checked="checked">
                    männlich
                </label>
                <label class="radio-inline" for="gender-1">
                    <input type="radio" name="gender" id="gender-1" value="2">
                    weiblich
                </label>
            </div>
        </div>


        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
            <div class="col-md-4">
                <div class='input-group  date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker2').datetimepicker({
                                language: 'de'
                            });
                        });
                    </script>

                </div>
            </div>

Answer 1

您的代码可以正常使用仅限Bootstrap （请参阅此小提琴http://jsfiddle.net/WNAB8/1/）

问题在于你自己的CSS。使用开发人员工具（F12）找出为输入提供margin-right或为插件提供margin-left的内容。或者选择粘贴您的自定义CSS，以便我们为您提供帮助。

<强>更新：

这肯定是因为给定的输入最大宽度。如果由于某种原因你想要使用最大宽度，一种解决方案是给出.input-group的最大宽度：

.input-group {
  max-width: 280px;
}

演示：http://jsfiddle.net/WNAB8/5/

Answer 2

在你的小提琴中，你正在重写bootstrap的textarea maxwidth选项。从CSS中删除它：

    /* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Working example

如果要更改文本区域的宽度，请使用form layout进行更改。从您的布局中，您应该查看horizontal form，并且可以通过将输入放入由col-*控制的div来更改宽度：

 <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>

Bootstrap标志符号图标文本字段

2 个答案: