CSS Flex硬伤项目

我试图将36天的弹性项目硬生生地分成每行12个左对齐的项目,但没有成功。 目前所有36个项目都显示在一行。这是我的ASP.NET CORE.cshtm。 谢谢你。

flex-start {
  display: flex;
  flex-wrap : wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-item {
  display:flex;
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="flex-start">
  @foreach (var item in Model.ListOfClosingDates)
  {
    DateTime thisDate = new DateTime(item.OriginalDate.YearID, item.OriginalDate.MonthID, item.OriginalDate.StopEnteringDataAfter);
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="@thisDate.ToString("MM-dd-yyyy")" type="text" value="@thisDate.ToString("MM-dd-yyyy")" />
    </div>
    <time datetime='@thisDate.ToString("MM-dd-yyyy")' class='@((item.Updatable == true) ? "icon swingable" : "icon")' data-editable="@((item.Updatable == true) ? "true" : "false")">
      <strong class="time-header">@thisDate.ToString("MMM"), @thisDate.Year</strong>
      <span class="time-body">@thisDate.Day</span>
      <em class="time-footer">@thisDate.DayOfWeek</em>
    </time>
    @if (item.Updatable)
    {
      <a asp-controller="Admin" asp-action="Edit" class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='@thisDate.ToString("MM-dd-yyyy")'>Adjust Closing Date</a>
    }
  </div>
  }
</div>

这是在IE中呈现的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>List - Indicator Admin</title>
  <link rel="stylesheet" href="/lib/jqueryui/jquery-ui.css" />
  <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css" />
  <link rel="stylesheet" href="/css/loadAwesome.css" />
  <link rel="stylesheet" href="/css/site.css" />
  <link rel="stylesheet" href="/css/calendar.css" />
  <link rel="stylesheet" href="/css/indicator.css" />
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 fixed-top">
      <div class="container">
        <a class="navbar-brand" href="/Home">
          <img src="/images/_logo.png" alt="Indicator Admin" class="img-responsive" />
          <div class="appTitle"><em>Indicator Admin</em></div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
          
<ul class="navbar-nav">
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello</span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" href="/AzureAD/Account/SignOut">Sign out</a>
        </li>
</ul>

          <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
              <a class="nav-link text-dark" href="/Home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-dark" href="/">Admin</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="spinnerContainer">
    <div class="la-ball-spin-clockwise-fade-rotating la-3x">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div class="container">
    <main role="main" class="pb-3">
      <div style="padding-top:150px">
        

<h1><span class="text-shadow">FY2019~FY2021 Closing Dates for Data Submission</span></h1>


<aside>
  <h3>
    <a class="btn refresh" href="/">Refresh</a>
  </h3>
</aside>

<div class="msgContainer btn-shadow absoluteCenterContainer">
  <div class="spaceBetweenFlex">
    <span id="msg" class="popupMessageArea"></span>
    <div class="closeButton">⊠</div>
  </div>
</div>

<div class="flex-start">
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2021" type="text" value="12-08-2021" />
    </div>
    <time datetime='12-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2021" type="text" value="11-08-2021" />
    </div>
    <time datetime='11-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2021" type="text" value="10-08-2021" />
    </div>
    <time datetime='10-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2021" type="text" value="09-09-2021" />
    </div>
    <time datetime='09-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-09-2021" type="text" value="08-09-2021" />
    </div>
    <time datetime='08-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2021" type="text" value="07-09-2021" />
    </div>
    <time datetime='07-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Friday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2021" type="text" value="06-08-2021" />
    </div>
    <time datetime='06-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-10-2021" type="text" value="05-10-2021" />
    </div>
    <time datetime='05-10-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2021</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-10-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2021" type="text" value="04-08-2021" />
    </div>
    <time datetime='04-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Apr, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='04-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2021" type="text" value="03-08-2021" />
    </div>
    <time datetime='03-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Mar, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='03-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2021" type="text" value="02-08-2021" />
    </div>
    <time datetime='02-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Feb, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='02-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-11-2021" type="text" value="01-11-2021" />
    </div>
    <time datetime='01-11-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jan, 2021</strong>
      <span class="time-body">11</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='01-11-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2020" type="text" value="12-08-2020" />
    </div>
    <time datetime='12-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-09-2020" type="text" value="11-09-2020" />
    </div>
    <time datetime='11-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2020" type="text" value="10-08-2020" />
    </div>
    <time datetime='10-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2020" type="text" value="09-09-2020" />
    </div>
    <time datetime='09-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-10-2020" type="text" value="08-10-2020" />
    </div>
    <time datetime='08-10-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-10-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2020" type="text" value="07-09-2020" />
    </div>
    <time datetime='07-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2020" type="text" value="06-08-2020" />
    </div>
    <time datetime='06-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2020" type="text" value="05-08-2020" />
    </div>
    <time datetime='05-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
      <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2020" type="text" value="04-08-2020" />
    </div>
    <time datetime='04-08-2020' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
<a class="btn btn-danger btn-vssc btn-shadow" href="/Admin/TransferToBI">BI Transfer</a>  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-09-2020" type="text" value="03-09-2020" />
    </div>
    <time datetime='03-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-10-2020" type="text" value="02-10-2020" />
    </div>
    <time datetime='02-10-2020' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2020" type="text" value="01-09-2020" />
    </div>
    <time datetime='01-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-09-2019" type="text" value="12-09-2019" />
    </div>
    <time datetime='12-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Dec, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2019" type="text" value="11-08-2019" />
    </div>
    <time datetime='11-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Nov, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2019" type="text" value="10-08-2019" />
    </div>
    <time datetime='10-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Oct, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-10-2019" type="text" value="09-10-2019" />
    </div>
    <time datetime='09-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Sep, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-08-2019" type="text" value="08-08-2019" />
    </div>
    <time datetime='08-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Aug, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2019" type="text" value="07-09-2019" />
    </div>
    <time datetime='07-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jul, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-10-2019" type="text" value="06-10-2019" />
    </div>
    <time datetime='06-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Jun, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2019" type="text" value="05-08-2019" />
    </div>
    <time datetime='05-08-2019' class='icon' data-editable="false">
      <strong class="time-header">May, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2019" type="text" value="04-08-2019" />
    </div>
    <time datetime='04-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2019" type="text" value="03-08-2019" />
    </div>
    <time datetime='03-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2019" type="text" value="02-08-2019" />
    </div>
    <time datetime='02-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2019" type="text" value="01-09-2019" />
    </div>
    <time datetime='01-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
</div>


      </div>
    </main>
  </div>

  <footer class="border-top footer text-muted">
    <div class="container">
      &copy; 2020 - IndicatorAdmin - <a href="/Home/Privacy">Privacy</a>
    </div>
  </footer>
  <script src="/lib/jquery/dist/jquery.min.js"></script>
  <script src="/lib/jqueryui/jquery-ui.js"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
  
  <script type="text/javascript">
  $(function () {
    $(".spinnerContainer").hide();
    $('.msgContainer').click(function () { $(this).hide() });

    $('.closingDate').css('display', 'none').filter(function () {
      return Date.parse($(this).data('closingdate')) >= new Date();
    })
    .focus(function (e) {
      $('.closingDate').datepicker("destroy");
      $('.closingDate').datepicker({dateFormat: "mm-dd-yy"});
      $('.closingDate').datepicker("option", "dateFormat" );
      console.log('closing date input click');
      console.log('calendar default date', $(this).data('closingdate'));
      $('.closingDate').datepicker({
        defaultDate: new Date($(this).data('closingdate')),
        changeMonth: false,
        changeYear: false,
        dateFormat: 'mm-dd-yy',
        stepMonths: 0
      });
    });

    $(".editable").click(function (e) {
      $('.closingDate').filter(function () {
        return Date.parse($(this).data("closingdate")) >= new Date();
      }).css('display', 'block');
      editDate($(this), e)
    });

    $('#createDates').click(function(e){createDates(e)});

    $("time").filter(function () {
      return Date.parse($(this).attr("datetime")) <= new Date();
    }).click(function (e) {
      //alert('Old date cannot be changed');
      $('#msg').html($(this).attr("datetime") + ' is an older date and cannot be changed');
      $('.msgContainer').removeClass('success').addClass('failure').show();
    });

    $("time").filter(function () {
      return Date.parse($(this).attr("datetime")) >= new Date();
    }).css('display', 'block').click(function (e) { editDate($(this), e) });


    function editDate(objThis, e)
    {
      console.log('e', e);

      var $this = objThis;
      console.log('$this', $this);

      var thisDate;
      var thisNewDate = new Date(1);

      if ($this[0].tagName == 'TIME') {
        thisDate = new Date($this.attr("datetime"));
        console.log('from <time> element> ', thisDate);
      }
      else {
        thisDate = new Date($this.data('closingdate'));
        console.log('from .editable class', thisDate);
      }

      e.preventDefault();

      $('#msg').html('');
      $(".spinnerContainer").show();
      $.ajax({
        url: '/Admin/EditByAjax',
        //data: JSON.stringify(postData),
        data: {
          NewDate: { YearID: thisNewDate.getFullYear(), MonthID: thisNewDate.getMonth()+1, StopEnteringDataAfter: thisNewDate.getDate() },
          OriginalDate: { YearID: thisDate.getFullYear(), MonthID: thisDate.getMonth()+1, StopEnteringDataAfter: thisDate.getDate() },
          Updatable: true,
          InitiateTransferToBI: true
        },
        datatype: "json",
        type: "POST",
        contenttype: 'application/json; charset=utf-8',
        async: true
      })
      .then(function (returnData) {
        console.log(returnData.message);
        $('#msg').html(returnData.message);
        if (returnData.message.toLocaleLowerCase().indexOf("failure") === -1) {
          console.log('pass1');
          $('.msgContainer').removeClass('failure').addClass("success").show();
        }
        else {
          console.log('pass2');
          $('.msgContainer').removeClass('success').addClass("failure").show();
        }
        $(".spinnerContainer").hide();
      })
      .fail(function (err) {
        console.log(err.message);
        console.log('pass3');
        $('#msg').html(err.message);
        $('.msgContainer').removeClass('success').addClass("failure").show();

        $(".spinnerContainer").hide();
      });
    };

    function createDates(e) {
      e.preventDefault();

      $('#msg').html('');
      $(".spinnerContainer").show();
      $.ajax({
        url: '/Admin/CreateByAjax',
        //data: JSON.stringify(postData),
        type: "GET",
        async: true
      })
      .then(function (returnData) {
        console.log(returnData.message);
        $('#msg').html(returnData.message);
        if (returnData.message.toLocaleLowerCase().indexOf("failure") === -1) {
          console.log('create date pass1');
          $('.msgContainer').removeClass('failure').addClass("success").show();
        }
        else {
          console.log('create date pass2');
          $('.msgContainer').removeClass('success').addClass("failure").show();
        }
        $(".spinnerContainer").hide();
      })
      .fail(function (err) {
        console.log(err.message);
        console.log('create date pass3');
        $('#msg').html(err.message);
        $('.msgContainer').removeClass('success').addClass("failure").show();

        $(".spinnerContainer").hide();
      });
    }
  });
  </script>

</body>
</html>

解决方案:

给你,每行12个项目。

.flex-start {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-item {
  display: flex;
  flex: 0 1 calc(100% / 12 - 10px);
  margin: 5px;
  height: 100px;
  background-color: blue;
  overflow:hidden;
}
<div class="flex-start">
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2021" type="text" value="12-08-2021" />
    </div>
    <time datetime='12-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2021" type="text" value="11-08-2021" />
    </div>
    <time datetime='11-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2021" type="text" value="10-08-2021" />
    </div>
    <time datetime='10-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2021" type="text" value="09-09-2021" />
    </div>
    <time datetime='09-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-09-2021" type="text" value="08-09-2021" />
    </div>
    <time datetime='08-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2021" type="text" value="07-09-2021" />
    </div>
    <time datetime='07-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2021" type="text" value="06-08-2021" />
    </div>
    <time datetime='06-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-10-2021" type="text" value="05-10-2021" />
    </div>
    <time datetime='05-10-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2021</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-10-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2021" type="text" value="04-08-2021" />
    </div>
    <time datetime='04-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Apr, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='04-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2021" type="text" value="03-08-2021" />
    </div>
    <time datetime='03-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Mar, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='03-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2021" type="text" value="02-08-2021" />
    </div>
    <time datetime='02-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Feb, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='02-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-11-2021" type="text" value="01-11-2021" />
    </div>
    <time datetime='01-11-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jan, 2021</strong>
      <span class="time-body">11</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='01-11-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2020" type="text" value="12-08-2020" />
    </div>
    <time datetime='12-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-09-2020" type="text" value="11-09-2020" />
    </div>
    <time datetime='11-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2020" type="text" value="10-08-2020" />
    </div>
    <time datetime='10-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2020" type="text" value="09-09-2020" />
    </div>
    <time datetime='09-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-10-2020" type="text" value="08-10-2020" />
    </div>
    <time datetime='08-10-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-10-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2020" type="text" value="07-09-2020" />
    </div>
    <time datetime='07-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2020" type="text" value="06-08-2020" />
    </div>
    <time datetime='06-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2020" type="text" value="05-08-2020" />
    </div>
    <time datetime='05-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2020" type="text" value="04-08-2020" />
    </div>
    <time datetime='04-08-2020' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-danger btn-vssc btn-shadow" href="/Admin/TransferToBI">BI Transfer</a> </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-09-2020" type="text" value="03-09-2020" />
    </div>
    <time datetime='03-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-10-2020" type="text" value="02-10-2020" />
    </div>
    <time datetime='02-10-2020' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2020" type="text" value="01-09-2020" />
    </div>
    <time datetime='01-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-09-2019" type="text" value="12-09-2019" />
    </div>
    <time datetime='12-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Dec, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2019" type="text" value="11-08-2019" />
    </div>
    <time datetime='11-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Nov, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2019" type="text" value="10-08-2019" />
    </div>
    <time datetime='10-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Oct, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-10-2019" type="text" value="09-10-2019" />
    </div>
    <time datetime='09-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Sep, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-08-2019" type="text" value="08-08-2019" />
    </div>
    <time datetime='08-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Aug, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2019" type="text" value="07-09-2019" />
    </div>
    <time datetime='07-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jul, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-10-2019" type="text" value="06-10-2019" />
    </div>
    <time datetime='06-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Jun, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2019" type="text" value="05-08-2019" />
    </div>
    <time datetime='05-08-2019' class='icon' data-editable="false">
      <strong class="time-header">May, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2019" type="text" value="04-08-2019" />
    </div>
    <time datetime='04-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2019" type="text" value="03-08-2019" />
    </div>
    <time datetime='03-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2019" type="text" value="02-08-2019" />
    </div>
    <time datetime='02-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2019" type="text" value="01-09-2019" />
    </div>
    <time datetime='01-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
</div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

QuantLib date ++ 操作员重载

2022-9-13 15:46:37

未分类

在大的RasterStack上使用writeRaster出错

2022-9-13 15:46:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索