表响应的引导对齐问题
Posted
技术标签:
【中文标题】表响应的引导对齐问题【英文标题】：Bootstrap alignment issue with table-responsive 【发布时间】：2017-05-31 23:16:00 【问题描述】：我正在 ASP.NET MVC 中制作一个日历，它会根据特定日期的 SQL 数据库中存储的内容动态地将锚链接添加到每一天。我正在使用带有 table-responsive 类的 html 表格来格式化宽度等。
基本上，我希望表格中的所有列都能响应，但有些固定。根据添加到 col-xs-12 的锚点数量，它可以看起来正确（下图中的第 5 天和第 6 天）或在右侧添加间距。多个锚元素或事件的右侧间距是我的问题。我该如何解决这个问题？我应该为 2 个或更多按钮添加另一行吗？我不确定如何解决这个问题，我不是 ui 专家。任何帮助，将不胜感激。我可以提供所需的任何其他文件。
html:
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> January 2017</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('12/6/2016 12:00:00 AM')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">7:44:45 pm</div>
<div>Monday, January 16, 2017</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('2/6/2017 12:00:00 AM')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
<td class="headerDay text-nowrap">
<span>Sunday</span>
</td>
<td class="headerDay text-nowrap">
<span>Monday</span>
</td>
<td class="headerDay text-nowrap">
<span>Tuesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Wednesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Thursday</span>
</td>
<td class="headerDay text-nowrap">
<span>Friday</span>
</td>
<td class="headerDay text-nowrap">
<span>Saturday</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">2</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/2/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/2/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/2/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/2/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/2/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('1/2/2017 12:00:00 AM')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">3</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/3/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/3/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/3/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/3/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/3/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">4</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/4/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/4/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">5</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/5/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/5/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/5/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">6</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/6/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/6/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/6/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/6/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">7</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/7/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/7/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
mvc calendar.cshtml:
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> @Model.MonthData.Name @Model.MonthData.Year</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(-1)')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">loading...</div>
<div>@DateTime.Now.ToString("D", CultureInfo.CreateSpecificCulture("en-US"))</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(+1)')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
@foreach (var day in Enum.GetValues(typeof(DayOfWeek)).OfType<DayOfWeek>().ToList())
<td class="headerDay text-nowrap">
<span>@day.ToString()</span>
</td>
</tr>
</thead>
<tbody>
@foreach (var week in Model.MonthData.WeeksInMonth)
<tr>
@if (Model.PrefixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.First())
foreach (var prefixDay in Model.PrefixDays)
<td>
@Html.Partial("_EventData", prefixDay)
</td>
@foreach (var day in week.DaysInWeek)
<td class="currentMonthBackground">
@Html.Partial("_EventData", day)
</td>
@if (Model.SuffixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.Last())
foreach (var suffixDay in Model.SuffixDays)
<td>
@Html.Partial("_EventData", suffixDay)
</td>
</tr>
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
mvc _eventdata.cshtml 局部视图：
@model Common.Calendar.DTODay
<div class="row">
<div class="form-group col-md-8 col-xs-1">
@if (Model.IsCurrentDay)
<div class="circle">@Model.DayNumber</div>
else
<div class="@(Model.IsOtherMonth ? "otherMonthDay" : "currentMonthDay")">@Model.DayNumber</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('@Model.FullDate')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('@Model.FullDate')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
@if (Model.ReminderCount > 0 || Model.NoteCount > 0 || Model.BirthdayCount > 0 || Model.Holiday != null)
<div class="row">
<div class="col-sm-12">
@if (Model.NoteCount > 0)
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('@Model.FullDate')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">@Model.NoteCount</span>
</a>
@if (Model.ReminderCount > 0)
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('@Model.FullDate')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">@Model.ReminderCount</span>
</a>
@if (Model.BirthdayCount > 0)
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('@Model.FullDate')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">@Model.BirthdayCount</span>
</a>
@if (Model.Holiday != null)
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('@Model.FullDate')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
【问题讨论】：
【参考方案1】：问题已解决。我用this SO question来回答它..
table
table-layout: fixed;
word-wrap: break-word;
模板：
<td style="width:14%">content</td>
将宽度更改为 14px，然后我删除了 bootstrap btnborder-width。
最终结果和快乐的露营者：
而且它在移动设备中看起来也很合适：
【讨论】：
以上是关于表响应的引导对齐问题的主要内容，如果未能解决你的问题，请参考以下文章