Question

在我的一个项目中，我需要在模态上显示编辑记录表单。所以，我正在使用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/

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

有人可以帮我解决这个问题吗？

Answer 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>

引导标签是重叠的输入文本字段

1 个答案: