Angular 水平表格中的日期选择器字段未对齐

Question

我在 Angular 中使用 Bootstrap 有一个水平表格。我有一个日期字段稍微错位了。这是我编写的 bootstrap 部分的代码。

 <div class="form-group">

                    <div class="col-md-offset-6">
                        <div class="col-md-12">
                            <label class="col-md-1 control-label">Ismessedup Date:</label>
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                              <p class="input-group">...

这是它的 fiddle：http://jsfiddle.net/c2bv2e6g/ 您必须将屏幕扩展到宽阔的视野才能看到我在说什么。

现在标签的左边缘已经匹配（虽然在 fiddle 中没有正确匹配，不知道为什么），但是 IsMessedUp 日期选择器的输入字段距离与其上方的输入字段相比。这就是我要解决的问题。

我已经能够按照我喜欢的方式排列标签和日期选择器，但随后日期选择器被压扁，因此您无法再看到整个日期。我想让它们排成一行，但要延长日期选择器输入字段的长度。我通过更改此处的代码来做到这一点：

                    <div class="col-md-3"></div>
                    <div class="col-md-3"></div>
                    <div class="col-md-3 col-sm-6">
                        <label class="col-md-6 control-label">Ismessedup Date: </label>

                        <div class="col-md-6">
                            <p class="input-group">..

最终我希望该字段足够大以查看日期并与其上方的字段对齐。

Answer 1

bootstrap 网格是基于百分比的。因此，当您按照自己的方式过度嵌套所有内容时，几乎不可能将它们排列起来，因为每一列都在计算它与不同大小的父项的宽度百分比。您想简化并考虑您真正想要的网格...

试试这个： http://jsfiddle.net/c2bv2e6g/3/

<div class="container-fluid">
<div class="panel panel-default">
    <div class="panel-heading">Panel</div>
    <div class="panel-body">
        <div ng-controller="CtrlController">
            <form class="form-horizontal" role="form">
                <div class="form-group row">
                  <label for="firstthing" class="col-md-1 col-sm-2 control-label">First Thing</label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="firstthing" placeholder="">
                  </div>

                  <label for="Second Thing" class="control-label col-md-1 col-sm-2"></label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="secondthing"
                           placeholder="Second Thing"
                           readonly>
                  </div>


                  <label for="thirdthing" class="col-md-1 col-sm-2 control-label">Third Thing</label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="thirdthing" placeholder="">
                  </div>

                  <label for="fourththing" class="col-md-1 col-sm-2 control-label"></label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="fourththing"
                           placeholder="fourththing"
                           readonly>
                  </div>
                </div>

                <div class="form-group row">
                  <label for="fifththing" class="col-md-1 col-sm-2 control-label">Fifth Thing</label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="fifththing" placeholder="">
                  </div>
                  <label class="col-md-1 col-sm-2 control-label">Fifth thing </label>
                  <div class="col-md-2 col-sm-4">
                    <p class="input-group">
                      <input type="text" class="form-control input-sm" uib-datepicker-popup="{{format}}"
                             ng-model="firstdt"
                             is-open="first.opened" min-date="minDate" max-date="maxDate"
                             datepicker-options="dateOptions"
                             ng-required="true" close-text="Close"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default input-sm" ng-click="open1()"><i
                                                                                                     class="glyphicon glyphicon-calendar"></i></button>
                      </span>
                    </p>
                  </div>
                  <label for="Sixth Thing" class="col-md-1 col-sm-2 control-label">Sixth Thing</label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="sixththing" placeholder="">
                  </div>

                  <label for="sevenththing" class="col-md-1 col-sm-2 control-label"></label>
                  <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control input-sm" id="sevenththing"
                           placeholder="sevenththing"
                           readonly>
                  </div>
                </div>



                <div class="form-group row">
                  <label class="col-md-1 col-md-offset-6 col-sm-2 control-label">Somethings Date:</label>
                  <div class="col-md-5 col-sm-10">
                    <p class="input-group">
                      <input type="text" class="form-control input-sm"
                             uib-datepicker-popup="{{format}}"
                             ng-model="somethingdt"
                             is-open="somethingdt.opened" min-date="minDate" max-date="maxDate"
                             datepicker-options="dateOptions"
                             ng-required="true" close-text="Close"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default input-sm" ng-click="open3()"><i
                                                                                                     class="glyphicon glyphicon-calendar"></i></button>
                      </span>
                    </p>
                  </div>
                </div>

            </form>
        </div> <!-- div panel-body -->
    </div> <!-- div panel-heading -->
</div> <!-- div panel -->

Angular 水平表格中的日期选择器字段未对齐

Datepicker Field in Angular horizontal form misaligned

css

angularjs

twitter-bootstrap-3

bootstrap-datepicker