Question

我目前在同一条线上有两个输入控件，但是它们似乎与上面的其他控件没有正确对齐，而且它看起来相当不合适。我不确定如何使它们正确对齐。以下是模态目前的样子：http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb它几乎就在那里，但还没到那里。这是我写的HTML

<div id="modalContent">
    <div class="form-group">
        <label class="col-md-2 control-label" for="datapointName">Name:</label>
        <div class="col-md-10">
            <input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="Desc">Description:</label>
        <div class="col-md-10">
            <textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="code">code:</label>
        <div class="col-md-10">
            <input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="metricType"></label>
        <div class="col-md-10">
            <select id="metricType" class="form-control" name="metricType" data-val="false"></select>
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <div class="col-md-5">
            <label class="col-md-4 control-label" for="valueMin">Value Range:</label>
            <div class="col-md-8">
                <input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
            </div>
        </div>
        <div class="col-md-2">
            <p>-</p>
        </div>
        <div class="col-md-5">
            <div class="col-md-8">
                <input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
            </div>
        </div>
    </div>
    <!-- /input-group -->
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>

这是我在Visual Studio中创建MVC项目时自动生成的css

input,
select,
textarea {
    max-width: 280px;
}

Answer 1

看起来你的专栏有点混乱......

试试这个：

<div class="col-md-12" id="modalContent">
    <div class="form-group">
        <label class="col-md-2 control-label" for="datapointName">Name:</label>
        <div class="col-md-10">
            <div class="col-md-4">
                <input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
            </div>
            <div class="col-md-8">

            </div>
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="Desc">Description:</label>
        <div class="col-md-10">
            <div class="col-md-4">
                <textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
            </div>
            <div class="col-md-8">

            </div>
        </div>
    </div>
    <!-- /input-group -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="code">code:</label>
        <div class="col-md-10">
            <div class="col-md-4">
                <input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
            </div>
        </div>
        <!-- /input-group -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="metricType"></label>
            <div class="col-md-10">
                <div class="col-md-4">
                    <select id="metricType" class="form-control" name="metricType" data-val="false"></select>
                </div>
                <div class="col-md-8">

                </div>
            </div>
        </div>
        <!-- /input-group -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="valueMin">Value Range:</label>
            <div class="col-md-10">
                <div class="col-md-4">

                    <div class="col-md-5" style="padding-left:0px;">
                        <input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
                    </div>

                    <div class="col-md-2">
                        <p style="text-align:center;">-</p>
                    </div>

                    <div class="col-md-5" style="padding-right:0px;">
                        <input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
                    </div>
                </div>
                <div class="col-md-8">

                </div>
            </div>
        </div>
        <!-- /input-group -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
    </div>
</div>

请原谅内联样式！

Answer 2

最好在制作列时使用行。

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>

我已用笔修复了你的代码。

http://codepen.io/costh/pen/XbzGxL

Answer 3

试试这个：

<div class="col-md-5">
   <div class="input-daterange input-group" id="valuerang">
       <span class="input-group-addon">Value Range:</span>
        <input class="input-sm form-control" name="start" type="text" id="abc"  required> <span class="input-group-addon"> - </span>
        <input class="input-sm form-control" name="end" type="text" id="abc" required> 
  </div>
</div>

确保修改标签名称以适合您的应用。

HTML文本框不是内联的

3 个答案: