具有表响应的引导对齐问题
我在ASP.NET MVC中制作一个日历，根据存储在特定日期的SQL数据库中的内容，每天动态添加锚链接。我使用带有table-responsive类的html表来格式化宽度等。
基本上，我希望所有列都能在表中响应，但有些修复。根据添加到col-xs-12的锚点数量，它可以看起来正确（下图中的第5天和第6天）或向右添加间距。带有多个锚元素或事件的右边距离是我的问题。我该如何解决这个问题？我应该为2个或更多按钮添加另一行吗？我不确定如何处理这个问题，我不是专家。任何帮助，将不胜感激。我可以提供所需的任何其他文件。
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 个答案:
答案 0 :(得分：0)
问题已经解决了。我使用this SO问题来回答它。
table {
table-layout: fixed;
word-wrap: break-word;
}
模板：
<td style="width:14%">content</td>
将宽度更改为14px，然后我删除了bootstrap btn border-width。
结果和快乐露营：
它在移动设备上看起来也很合适：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？