文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS Flex硬碎项

问CSS Flex硬碎项
EN

Stack Overflow用户
提问于 2020-04-27 17:47:02
回答 1查看 57关注 0票数 0

我试着把36天的弯曲物品硬折成每排12件合理的物品，但没有成功。目前，所有36项都显示在一行中。这是我的ASP.NET核心.cshtm。谢谢。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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中呈现的

​

代码语言：javascript
复制
<!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">&#x22A0;</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>

​

css
razor
flexbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-27 20:48:25

给您，每行12项：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61465089

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档