如何以每组两个为一组显示项目列表
我正在使用Bootstrap和Coldfusion，我能够找到允许我从日历中显示两个项目并显示它们的代码。但是，它显示如下：
正如您在上面所看到的，这就是我想要的，但是，如果您查看更多事件部分，事件就不会堆叠起来。我希望在一行中有两个事件，依此类推。
以下图片是我在寻找一行中有2个事件等等的图片。
我遇到的另一个问题是，我无法在“更多事件”部分下一次显示2个以上的事件，并且想知道我需要做什么才能一次显示至少4个事件。
我想要产生的最终结果如下：
以下是我正在使用的css和colfusion代码（事先告诉我看起来有多难看。很快就要清理它）：
<!--- Derived from: --->
<!--- https://gist.github.com/stevewithington/18a6ef38e7234f1e1fc3 --->
<!--- Upcoming events --->
<cffunction name="dspDisplayEvents">
<cfargument name="feedName" type="string" default="8C702325-155D-0201-11D851267D5B4B2B" />
<cfargument name="maxMonths" type="numeric" default="3" />
<cfargument name="groupDailyEvents" default="true" />
<cfscript>
var rs = '';
var subRS = '';
var local = {};
local.feed = variables.$.getBean('feed').loadBy(name=arguments.feedName).setMaxItems(0).setNextN(0);
local.listIDs = '';
/* if ( feed.getIsNew() ) {
return '<div class="alert alert-info"><strong>Ooops!</strong> The Content Collection/Feed "<strong>#HTMLEditFormat(arguments.feedName)#</strong>" does not exist.</div>';
}*/
local.it = feed.getIterator(
from=Now()
, to=DateAdd('m', Val(3), Now())
, maxItems=6
);
rs = local.it.getQuery();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<!--- #feed.getIsNew()# --->
<!--- #local.it.hasNext()# --->
<cfset ctr= 1 />
<cfloop condition="(local.it.hasNext()) AND (ctr LT 4)">
<cfset local.item = local.it.next() />
<cfif not ListFind(local.listIDs, local.item.getValue('contentid'))>
<cfif ctr eq 1>
<!--- TODO: set a default image if no image is available --->
<div class="bg-white1 centerEvent">
<div class="hidden-xs override-col-md-offset-3 col-md-2 centerEvent margin-left">
<p class="image-center upcoming-events-image image-padding"><img src="#local.item.getImageURL()#" alt="#HTMLEditFormat(local.item.getTitle())#"> </p>
</div>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-2 expand-featured-event" id="featured-event">
<table width="94%">
<tbody>
<tr>
<td colspan="4" class="eventCenter">
<h4 class="featured1"><strong>FEATURED EVENT</strong></h4>
</td>
</tr>
<tr>
<td>
<hr class="hr" />
</td>
</tr>
</tbody>
</table>
<div class="eventTop">
<h6 class="ellipsis h6size"><!--- Title --->
<div class="featured-event-title features">
<strong>#HTMLEditFormat(local.item.getValue('title'))#</strong>
</div>
</h6>
<small>
<!--- date --->
<!--- start date --->
#LSDateFormat(local.item.getValue('displayStart'))#
<!--- end date (if 'daily' event, and grouping is requested) --->
<cfif YesNoFormat(arguments.groupDailyEvents)>
cfquery dbtype="query" name="subRS">
select *
from rs
where rs.contentid = <cfqueryparam value="#local.item.getValue('contentid')#" />
</cfquery>
<cfif subRS.recordcount gt 1>
<!--- end date --->
<cfset enddate = ListLast(ValueList(subRS.displaystop)) />
<cfif IsValid('date', enddate)>
- #LSDateFormat(enddate)#
</cfif>
</cfif>
<cfset local.listIDs = ListAppend(local.listIDs, local.item.getValue('contentid')) />
</cfif>
</small>
<small>
<!--- Summary --->
<div class="featured-event-summary">
<cfif Len(local.item.getValue('summary'))>
#local.item.getValue('summary')#
</cfif>
</div>
</small>
<a href="##"><small>Learn more ></small></a>
<br />
</div>
<cfelse>
<div class="paddingMore">
<cfif ctr eq 2>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 override-col-md-2 moreEventMargin">
<small><strong class="featured moreCenter" style="margin-bottom:5px">MORE EVENTS</strong></small><br />
</cfif>
<div style="margin-top:5px">
<small>#LSDateFormat(local.item.getValue('displayStart'))#</small><br />
<small><strong>#HTMLEditFormat(local.item.getValue('title'))#</strong></small><br />
</div>
<br />
</cfif>
</cfif>
<cfset ctr++ />
</cfloop>
</div>
</div>
<button class="btn btn-info btn-md resizable buttonHome" type="button" onClick="parent.location='http://oc2-web03/regal_prod/index.cfm/news-events/events-calendar/'"><small>SEE ALL EVENTS ></small></button><br />
</div>
</div><!---closes the bg-white1 div--->
<!---<button class="btn btn-info btn-md resizable" type="button" onClick="parent.location='http://oc2-web03/regal_prod/index.cfm/news-events/events-calendar/'" ><small>SEE ALL EVENTS ></small></button><br />
</div>--->
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction> /*----- general styles -----*/
html, body { font-family: "OpenSans", sans-serif;background-color:#f9f9f9 }
media (min-width: 1170px){
body { width: 1170px; margin-left: auto; margin-right: auto; }
}
}
body { position: relative; }
h1, h2, h3 { font-family: "UrgeText", sans-serif; }
large, .large { font-size: 120%; }
.text-black { color: #000000; }
.text-gray { color: #888888; }
.bg-white { background-color: #FFFFFF;}
.bg-white2{background-color: #FFFFFF; height:214px;}/*07/15/2016*/
.hr{margin-top:-1px !important; width: 118%;}
.eventTop{margin-top:-40px;}
.margin-right { margin-right: 30px; }
.no-padding-right { padding-right:0; }
.no-padding-left { padding-left:0; }
.no-margin { margin: 0; }
.no-margin-right { margin-right: 0; }
.moreEventMargin{margin-top:-2px; margin-left:-7px;}/*81px top*/
.buttonHome{margin-top:31px; margin-left:369px;} /*-80px top*/
.btn-standard {
border-color: #000;
border-radius: 0;
background-image: none;
}
.override-col-xs-offset-1{
margin-left:14.333333%;
}
/*07/15/2016*/
.image-padding{
margin-top:34px;
border:10px solid #f9f9f9;
}
/*07/15/2016*/
.featured{
color:#337ab7;
padding-top:26px;
}
.featured1{
color:#337ab7;
padding-top:9px;
}
.features{
color:#337ab7;
padding-top:26px;
}
/*For Doctor Finder shift address Address2 @ROB*/
.shiftAdd{margin-left:62px;}
.shiftAddUrgent{margin-left:80px;}
/*@ROB*/
.padding{
padding-bottom:2px
}
/*@ROB* 06/15/2016*/
.ignore{
}
/*******************************************************/
/*07/07/2016 comment out padding-bottom*/
.navbarpadding {
padding-bottom: 10px;
}
.navbarapp-padding{
padding-bottom: 20px;
}
.body-padding{
margin-top:70px;/*Note: This is for Mura. For production, we would need to see the actual results.*/
}
.finder-padding{
margin-top:50px;/*Note: This is for Mura. For production, we would need to see the actual results.*/
}
/*07/07/2016 called container fluid to add the margin between navbar and body content*/
/*Full size of the calendar with no scroll bar 07/05/2016*/
/*.fullheight{
margin-bottom:500px;
}
/*07/06/2016 To remove the particular height from calendar*/
/*.fc-scroller{
height:auto !important;
}*/
/*07/11/2016 to increase the width of the background*/
/*.bg-white1{
background-color:#FFFFFF;
width:34.8%;
}*/
/*event mobile devices*/
@media(max-width:650px){
.centerEvent{text-align:center;}
.moreEventMargin{margin-top:16px !important; margin-left:58px !important;}/*0px top and left 57px*/
.buttonHome{margin-top:-21px !important; margin-left:0px !important;}
.bg-white2{background-color: #FFFFFF; height: 0px;}
.margin-left{margin-left:0px;}
.image-padding{
margin-top:0px;
border:10px solid #f9f9f9;
}
.margin-leftTable{margin-left:46px;}
.eventTop{margin-top:-40px; margin-left:60px}
.bg-white1{background-color: #FFFFFF; height:auto; padding-bottom:10px;}/*07/15/2016*/
}
@media(max-width:650px) and (orientation:landscape){
.hr{margin-top:-1px !important; margin-left:63px;}
.featured1{
color:#337ab7;
padding-top:26px;
margin-left:68px;
}
.hr{margin-top:-1px !important; width: 84%;}
}
@media(max-width:721px){
.margin-left:{0px;}
bg-white1{background-color: #FFFFFF; height: auto; padding-bottom:0px;}
.buttonHome{margin-top:18px !important; margin-left:0px !important;}
}
@media(max-width:750px) {
.centerEvent{text-align:center;}
.featured1{
color:#337ab7;
text-align: center;
}
.moreCenter{
text-align: center;
}
}
@media(max-width:750px) and (orientation:landscape) {
.buttonHome{margin-top:18px !important; margin-left:55px !important;}
}
/*allows the scroller to appear on mobile version 07/11/2016*/
@media(max-width:480px){
.fc-scroller{
overflow-x:hidden !important;
overflow-y: scroll !important;
height:100px !important
}
/*07/15/2016*/
.bg-white1{background-color: #FFFFFF; height:auto; padding-bottom:20px !important;}/*07/15/2016*/
.centerEvent{text-align:center;}
.moreEventMargin{margin-top:20px !important; margin-left:16px !important;}
.buttonHome{margin-top:0px; margin-left:2px;}
.expand-featured-event{width:86% !important; }
.image-padding{margin-top:0px;}
.margin-left{margin-left:0px;}
/*.fullheight{height:200px !important;}*/
.image-padding{
margin-top:0px;
border:10px solid #f9f9f9;
}
.featured{
color:#337ab7;
padding-top:10px;
}
.margin-leftTable{margin-left:7px;}
.eventTop{margin-top:-40px; margin-left:0px}
.hr{margin-top:-1px !important; width: 103%;}
}
.override-col-xs-2, .override-col-xs-10{
float:right;
min-height:1px;
}
/*Expand Events on home page 07/11/2016*/
@media (min-width:992px){
.override-md-offset-3{
width:3.5%; /*3%*/
}
.override-col-md-2{
/*float:left;*/
width:83.66666667%;
}
.paddingMore{margin-top:-90px; padding-left:220px;}
.margin-left{margin-left:40px;}
.bg-white1{background-color: #FFFFFF; height:auto; padding-bottom:10px;}
}
@media (max-width:977px){
.bg-white1{background-color: #FFFFFF; height:auto; padding-bottom:0px;}/*07/15/2016*/
}
/*Change button color for slideshows override theme.min.css 07/05/2016*/
.btn-info1 {
color: white;
background-color: #5bc0de;
border-color: #46b8da;
background-image:-webkit-linear-gradient(top, #004377 0, #004377 100%);
background-image:-linear-gradient(to bottom, #004377 0, #004377 100%);
background-repeat:repeat-x;
border-color:#00437;
}
.slideText{
color:white;
}
/*Following is to center the 2016 copyright Regal ... footer*/
@media (min-width:1200px){
.override-col-lg-6{
width:63%;
margin-left:252px;
}
}
/*****************************************************/
/*override Theme.min.css file @ROB*/
.navbar .navbar-nav:not(.ignore){
padding-bottom:10px;
margin-left: 0;
margin-right: 0;
}
.container-fluid.ng-scope:not(#home-content){
padding-top:20px;
}
.break-all { word-break: break-all }
/*Added by Rob 05/13/2016*/
.calendarResize{width:100%;}
/*Added by Rob 05/31/2016*/
.fixIconCal{padding-left:0px;}
.fc-left h2{
font-size:22px;
}
/*If we are going to use a style sheet Added by @Rob*/
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
@media (min-width: 450px){
.has-margin-top { margin-top:20px; }
.no-margin-top { margin-top:0; }
}
/*------ navbar.cfm, navbar_ap.cfm */
@media (min-width: 768px) {
header { height: 120px; }
}
.absolute-position {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
@media (max-width: 480px){
.fc-view-container{width:109%;}
/*07/08/2016 Added the following so title is visible*/
.visible-xs{
display:block !important;
margin-top:40px;
}
/*07/08/2016 Added the following so adjust indicators*/
.carousel-indicators{
position: absolute;
bottom: -1px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
}
@media (max-width: 639px){
.company-logo { width: 210px; }
}
@media (min-width: 640px){
.company-logo { width: 300px; }
}
@media (min-width: 768px){
.company-logo { width: 400px; }
}
/*Added by Rob 05/13/2016*/
@media (max-width: 800px){
.fc-view-container{width:94%;}
.buttonHome{margin-bottom:-21px; margin-left:489px; margin-top:-41px;}
.moreEventMargin{margin-top:-92px; margin-left:211px;}
}
.navbar-toggle .icon-bar { background: rgba(0,119,192,1); }
.navKeywords { border-right-style: none; }
.navKeywordsSubmit {
border-left-style: none;
border-color: #000;
}
.navbar {
border: 0;
box-shadow: none;
}
.well {
background-color: initial;
background-image: none;
border: none;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
.well .nav-list .nav-list a{
font-size: 90%;
}
/*Added 06/15/2016 */
@media (max-width: 1023px){
.navbar-opacity {
/*background-color: rgb(255, 255, 255);*/
background-color:#f9f9f9;
background: rgba(255, 255, 255);
/*background:#f9f9f9;*/
filter: initial;
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}
.navbar-opacity-home {
background-color: rgb(255, 255, 255);
/*background-color:#f9f9f9;*
background:#f9f9f9;
filter: initial;
/*For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}
/*Added by Rob. Fixed the issue with footer being cut off in tablet and mobile sites*/
.col-lg-2{
position: relative;
min-height: 15px;
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width:1024px){
.navbar-opacity {
/*background-color: rgb(0, 0, 0);*/
background-color:#f9f9f9;
/*background: rgba(255, 255, 255, .7);*/
background: rgba(249, 249, 249, .7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}
.navbar-opacity-home {
background-color: rgb(0, 0, 0);
background-color:#f9f9f9;
/*background: rgba(255, 255, 255, .7);*/
background: rgba(249, 249, 249, .7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}
}
@media (min-width: 768px) {
.navbar { background-image: none; }
}
@media (min-width: 768) and (max-width: 1024){
.navbar-header .container {
width: auto;
}
}
/*display image in mobile devices for News/Events page @ROB*/
@media (max-width: 767px){
.upcoming-events-image {
max-width: 180px;
max-height: 180px;
width:95%;
}
.hidden-xs.col-md-2{
display:inline !important;
}
.fc-scroller{
overflow: visible !important;
display:inline-block !important;
}
.fc-scroller.fc-day-grid-container{
height:auto !important;
}
}
/*Fixes the icon calendar @ROB*/
@media(min-width: 968px){
.icon-fix{
margin-left:-15px;
}
}
.navbar-nav > li > a { padding: 10px; }
@media (min-width: 1024px){
#navPrimary li a:link
, #navPrimary li a:visited { color: black; }
#navPrimary li.active a:link
, #navPrimary li.active a:visited { color: #0077C0; }
#navPrimary li a:hover
, #navPrimary li a:active{ color: #0077C0; }
#navPrimary li.first a{ padding-left:0; }
#navPrimary li.last a{ padding-right:0; }
.nav>li>a:hover{
text-decoration:underline;
background-color:transparent
}
.nav-tabs>li>a:hover{ border-color:initial }
#navStandard ul.nav li a:link
, nav#navStandard ul.nav li a:visited { color: #808080; }
#navStandard ul.nav li a:hover
, nav#navStandard ul.nav li a.active { color: #0077C0; }
#navStandard ul.nav li a.active { font-weight: bold; }
.navbar .navbar-nav>.active>a {
background-color:transparent;
color: #0077C0;
}
}
@media (max-width: 1023px){
a.navbar-brand { padding-right: 0; }
}
.bw-button {
border: 1px solid rgb(0, 0, 0);
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
.radio-custom { display: none; }
.radio-label-custom {
border: 1px solid rgb(0, 0, 0);
margin: auto 1px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
line-height: 95%;
vertical-align: middle;
text-align: center;
}
.radio-custom:checked + .radio-label-custom {
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
}
/*------ end navbar.cfm, navbar_ap.cfm */
/*----- home.cfm -----*/
#homepage .carousel { margin-top:auto; }
@media (min-width: 768px) {
#homepage .carousel .item{ height:650px; }
#homepage .carousel .carousel-caption {
left: 20px;
top: 90px;
}
}
@media (max-width: 767px){
/*07/08/2016 Modified #homepage .carousel .item { height: 200px; } and added margin-top:85px*/
#homepage .carousel .item {
height: 200px;
margin-top:85px;
}
#homepage .carousel .item img {
max-width: 100%;
height: auto;
display: block;
}
#homepage .carousel .carousel-caption {
left: 0;
top: 35px;
color: #0077C0;
}
}
#homepage .carousel .carousel-caption {
background-color: transparent;
text-align: left;
}
@media (min-width: 1024px){
#homepage .carousel .carousel-caption {
left: 10;
top: 160px;
width: 500px;
}
.carousel-caption h1
, .carousel-caption h2 *{ color: #0077C0 }
#homepage .carousel .item img{
<!-- [if IE 9]>
top:200px;
width: 100%;
<![endif]-->
}
.slideHeader {
font-size: 40px;
color: #0077C0;
font-family: "UrgeText";
}
}
@media (min-width: 1170px){
#homepage .carousel .carousel-caption {
left: 130px;
}
}
/****************Carousel Expands. Carousel-caption and body content remains the same ROB*********************/
@media (min-width:1281px){
#homepage .carousel .carousel-caption {
left:auto;
right:auto;
max-width:1263px;
margin-left:70px;
}
.footer-links{
margin:auto;
max-width:1263px;
}
.bodyPages{
margin:auto !important;
max-width:1263px !important;
}
#searchForm{
margin:auto !important;
max-width:1263px !important;
}
/* body{
/*max-width:1263px !important;
margin:auto;
}*/
.depth-2 {
margin: auto;
max-width:1263px !important;
}
.depth-1{
margin: auto;
max-width:1263px !important;
}
/*.carousel-caption {
max-width: 775.81px;
margin: auto;
}
.row.item img{
width:100%;
}*/
}
/*********************************************************/
@media (min-width:1263px){
body{
overflow-x:hidden;
}
}
#home-content { padding-left: 0; padding-right: 0 }
.quickLink {
/*border: 1pt solid black;*/
padding-bottom: 10pt;
}
.upcoming-events-image {
max-width: 180px;
max-height: 180px;
}
.expand-featured-event{
width:74%;
}
#featured-event, #more-events {
margin-bottom: 20px;
padding: 15px 0px;
}
@media (min-width: 1024px){
#featured-event, #more-events{
height: 214px;
overflow: hidden;
}
#featured-event .featured-event-title {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#featured-event .featured-event-summary {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/*----- end home.cfm -----*/
/*----- inc/footer.cfm ----*/
footer table{
margin: 30px auto;
border-collapse: separate;
border-spacing: 20px 20px;
}
footer td {
vertical-align: top;
}
.footer-links {
margin-top: 20px;
font-size: 12px;
}
/*Modified by Rob*/
/*.row {
margin-left: 2px;
margin-right: 2px;
}*/
@media (max-width: 1023px){
#footer-affiliation {
background-color: #0077C0;
color: rgb(255, 255, 255);
padding: 5px;
}
#footer-affiliation a { color: rgb(255, 255, 255) }
}
@media (min-width: 1024px){
.footer-column { margin-right: 20px }
}
.fc-time{display:none;}
任何帮助将不胜感激。感谢
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？