两个内联引导日期选择器不适合引导网格列和面板答案

【问题标题】：Two inline Bootstrap datepickers not fitting bootstrap grid column and panel两个内联引导日期选择器不适合引导网格列和面板
【发布时间】：2016-01-12 16:50:15
【问题描述】：

我是前端的新手。我一直在开发一个小的单页 angularjs 应用程序，但遇到了一个问题。在我的页面上，我需要两个内联日期选择器。我选择了 angular-ui-bootstrap 日期选择器。它们以一种奇怪的方式呈现，相互遮蔽：

veiling datepickers

这是我的 HTML 代码的一部分：

<div class="row">
<div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Date range</h4>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-md-5">
                        <div style="display: inline-block;">
                            <uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false"></uib-datepicker>
                        </div>
                        <div>
                            <label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
                        </div>
                    </div>

                    <div class="col-md-5 ">
                        <div style="display: inline-block;">
                            <uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false"></uib-datepicker>
                        </div>
                        <div>
                            <label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

<div class="col-md-6">
    <label> Additional Info</label>
</div>

你知道如何在没有这种面纱的情况下使它们正常地适合面板吗？
在我将日期选择器放入面板 div 之前，显示问题是相同的。它们被拧紧在一起，不适合网格柱。
每一个帮助将不胜感激

【问题讨论】：

标签： angularjs datepicker angular-ui-bootstrap

【解决方案1】：

由于<uib-datepicker>具有固定大小，无法根据网格宽度调整大小，您可以自定义小按钮的大小（天）。请参阅.custom-size .btn-sm CSS 类下方的 sn-p：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', function($scope) {

});

.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS UI Bootstrap</title>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="app.js"></script>
</head>

<body ng-controller="MyCtrl">

  <div class="container-fluid">
<h2>AngularJS: UI Bootstrap datepicker</h2>

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4>Date range</h4>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <div style="display: inline-block;">
              <uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false" class="custom-size"></uib-datepicker>
            </div>
            <div>
              <label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
            </div>
          </div>
          <div class="col-md-6">
            <div style="display: inline-block;">
              <uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
            </div>
            <div>
              <label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <label> Additional Info</label>
  </div>
</div>
  </div>

</body>

</html>

【讨论】：

嗨，这对我的应用程序来说不是一个好的解决方案，因为由于上面板的大小，面板的 col 宽度必须等于 6。更改 datepickers 面板的宽度会导致 UI 看起来很草率。更重要的是，当我使用您的解决方案时，我不得不将 datepickers col 大小更改为 8 以确保它们不会相互遮盖。在不重新设计整个 UI 的情况下，我不能让自己为此而努力，这现在是不可能的。
@cAMPy：我编辑了我的答案，修改了 datepicker 迷你按钮的原始大小。检查它是否适合您。