引导标签与输入文本字段重叠答案

【问题标题】：Bootstrap labels are overlapping input text field引导标签与输入文本字段重叠
【发布时间】：2018-03-07 16:40:39
【问题描述】：

在我的一个项目中，我需要在模态框上显示编辑记录表单。所以，我使用 bootstrap 3.3.7 模式来显示编辑表单。但我看到 Html 页面上控件对齐的奇怪行为，因为标签在输入字段上重叠。

    <html>
    <head>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<form>
    <div class="container">
                <div class="form-inline">
            <div class="col-md-3">
                <label for="txtArtiklenummer" class="col-md-6 control-label">Artikelnummer:</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                </div>
            </div>

            <div class="form-group col-md-3">

                <label for="txtPharmacode" class="col-md-6 form-control-label">Pharmacode:</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="txtPharmacode" name="txtPharmacode" value="" />
                </div>
            </div>
            <div class="col-md-2">

                <label for="txtPrdnr" class="col-md-6">Prdnr:</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="txtPrdnr" name="txtPrdnr" value="">
                </div>
            </div>

            <div class="col-md-4">
                <label for="txtTimestamp" class="col-md-5">Timestamp:</label>
                <div class="col-md-6 input-group date" data-provide="datepicker">
                    <input type="text" id="txtTimestamp" name="txtTimestamp" class="form-control disabled" value="">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                </div>
                <button type="button" class="col-md-1 btn btn-default btn-sm pull-right">
                    <span class="glyphicon glyphicon-exclamation-sign"></span>
                </button>
            </div>

        </div>


    </div>
</form>
</body>
</html>

JSfiddle -

http://jsfiddle.net/umamaheswarcs/dmezLn5k/10/

请最大化输出窗口以查看对齐问题。

谁能帮我解决这个问题？

【问题讨论】：

标签： html twitter-bootstrap bootstrap-modal

【解决方案1】：

将 div 标签放在 label 标签之前，并从标签中删除 col-md 类。例如：

            <div class="col-md-3">
                <div class="col-md-4">
                    <label for="txtArtiklenummer" class="control-label">Artikelnummer:</label>

                    <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                </div>
            </div>

或者将标签放在另一个div中：

                  <div class="col-md-3">
                    <div class="col-md-6">
                        <label for="txtArtiklenummer" class="control-label">Artikelnummer:</label>
                    </div> 
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="txtArtikelnummer" name="txtArtikelnummer" value="" />
                    </div>
                </div>

【讨论】：

谢谢纽曼。遵循您的建议后，它解决了对齐问题。我看到时间戳没有正确对齐。我需要在这里进行更改吗？我更新了 JSFiddle。 jsfiddle.net/umamaheswarcs/dmezLn5k/52
@umamaheswar.cs 将您的<label /> 移出.input-group div，然后它会排成一行。