Joomla 3.x Protostar - 如何使自定义位置水平而不是垂直堆叠
Joomla 3.x Protostar - how to make custom positions stack horizontally rather than vertically
我需要一些帮助来弄清楚如何配置以下代码，该代码创建三个自定义位置以水平而不是垂直内嵌显示，如下图所示（抵押日报、登录和考勤卡占用三个位置）。这是 Index.php 文件中的代码。自定义位置是代码中的位置 10、11 和 12。
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="position-1" style="none" />
</nav>
<?php endif; ?>
<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span; ?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
<?php if ($this->countModules('position-9')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3">
<jdoc:include type="modules" name="position-9" style="well" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-10')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3" style="clear: none; display: block">
<jdoc:include type="modules" name="position-10" style="well" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-11')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3" style="clear: both; display: block">
<jdoc:include type="modules" name="position-11" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-12')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3">
<jdoc:include type="modules" name="position-12" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
HTML 被请求
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="http://intranet.icghome.com/index.php/home" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Chris Cavaco" />
<meta name="description" content="ICG Intranet" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Home</title>
<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/media/tooltips/css/style.min.css" type="text/css" />
<link rel="stylesheet" href="/templates/protostar/css/template.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_jw_srfr/tmpl/compact/css/template.css" type="text/css" />
<link rel="stylesheet" href="/media/system/css/frontediting.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_marqueeaholic/css/marquee.css" type="text/css" />
<style type="text/css">
.nn_tooltips-link {border-bottom: 1px solid #cccccc;} .nn_tooltips.popover {max-width: 600px;z-index: 10000;}
</style>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/tooltips/js/script.min.js" type="text/javascript"></script>
<script src="/templates/protostar/js/template.js" type="text/javascript"></script>
<script src="/media/system/js/frontediting.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.marquee.min.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.pause.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
jQuery(document).ready(function()
{
jQuery('.hasPopover').popover({"html": true,"trigger": "hover focus","container": "body"});
});
window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r){r.open("GET","./",true);r.send(null)}},1740000);
</script>
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,h2,h3,h4,h5,h6,.site-title{
font-family: 'Open Sans', sans-serif;
}
</style>
<style type="text/css">
body.site
{
border-top: 3px solid #0088cc;
background-color: #f4f6f7 }
a
{
color: #0088cc;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: #0088cc;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<!--[if lt IE 9]>
<script src="/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="site com_content view-article no-layout no-task itemid-101 fluid">
<!-- Body -->
<div class="body">
<div class="container-fluid">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="/">
<img src="http://intranet.icghome.com/images/icg2.PNG" alt="intranet" /> </a>
<div class="header-search pull-right">
</div>
</div>
</header>
<nav class="navigation" role="navigation">
<ul class="nav menu nav-pills jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=1&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Main Menu<br />Position: position-1">
<li class="item-101 current active"><a href="/index.php/home" ><span>Home</span></a></li><li class="item-156 dropdown deeper parent"><a class=" dropdown-toggle" data-toggle="dropdown" href="#" ><span>Departments<b class="caret"></b></span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-269"><a href="/index.php/home-acct" ><span>Accounting</span></a></li><li class="item-270"><a href="/index.php/home-hr" ><span>Human Resources</span></a></li><li class="item-268"><a href="/index.php/it-home" ><span>IT</span></a></li><li class="item-160 dropdown-submenu deeper parent"><a href="/index.php/dept/ops" ><span>Operations</span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-271"><a href="/index.php/compliance" ><span>Compliance</span></a></li><li class="item-273"><a href="/index.php/home-qc" ><span>Quality Control</span></a></li><li class="item-272"><a href="/index.php/home-proc" ><span>Processing</span></a></li><li class="item-274"><a href="/index.php/home-pc" ><span>Post Closing</span></a></li><li class="item-275"><a href="/index.php/home-sec" ><span>Secondary</span></a></li><li class="item-276"><a href="/index.php/home-uw" ><span>Underwriting</span></a></li></ul></li><li class="item-277"><a href="/index.php/sales" ><span>Sales</span></a></li></ul></li><li class="item-109"><a href="/index.php/branch-list" ><span>Branch List</span></a></li><li class="item-110"><a href="/index.php/employee-directory" ><span>Employee Directory</span></a></li><li class="item-261"><a href="/index.php/announcements" ><span>Announcements</span></a></li></ul>
</nav>
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=114&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Announcements<br />Position: banner">
<script type="text/javascript">
jQuery(function(){
var $mwo = jQuery('.marquee-with-options');
jQuery('.marquee').marquee();
jQuery('.marquee-with-options').marquee({
speed: 10000, //speed in milliseconds of the marquee
gap: 50, //gap in pixels between the tickers
delayBeforeStart: 0, //gap in pixels between the tickers
direction: 'left', //'left' or 'right'
duplicated: 0, //true or false - should the marquee be duplicated to show an effect of continues flow
pauseOnHover: 1 //on hover pause the marquee
});
});
</script>
<style>
.marquee-with-options {color: #ebebeb; font-family:Arial, Helvetica, sans-serif; font-size: ; line-height: auto; width: 940px; background: #0985f2; border: groove #; margin-bottom: 0px; text-decoration: none;}
.marquee-with-options a {color: #ebebeb;}
</style>
<div class='marquee-with-options '>This Week's Birthdays -- <b> Jack Daniels</b> 5/4 <b>Dustin DiMisa </b> 5/6 <b>Charles Foley</b> 5/6
<b> Rosemary Cowan </b> 5/8</div>
</div>
<div class="row-fluid">
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=16&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Login Form<br />Position: position-8">
<form action="http://intranet.icghome.com/index.php/home" method="post" id="login-form" class="form-vertical">
<div class="login-greeting">
Hi Jake Nolan, </div>
<div class="logout-button">
<input type="submit" name="Submit" class="btn btn-primary" value="Log out" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.logout" />
<input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD0xMDEmb3B0aW9uPWNvbV9jb250ZW50" />
<input type="hidden" name="b42506b697bf46bf6ca4e7fa65ed4c15" value="1" /> </div>
</form>
</div>
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=154&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Main-left<br />Position: position-8">
<div class="custom" >
<p><a href="https://mail.google.com/mail" target="_blank"><br /><img src="http://icons.iconarchive.com/icons/wwalczyszyn/android-style-honeycomb/128/GMail-icon.png" alt="" width="29" height="29" /></a><a href="https://mail.google.com/mail" target="_blank" style="text-align: justify;">Access GMail</a><a href="https://mail.google.com/mail" target="_blank"></a></p>
<p><a href="https://mail.google.com/mail" target="_blank"></a></p>
<hr align="left" width="34%" />
<p style="text-align: left;"><a href="https://mail.google.com/mail" target="_blank"><img src="http://dentrix.com/uploads/icons/background/png/Suggestion-Box.png" alt="" width="33" height="33" /></a><a href="/index.php/suggestions">Suggestions</a></p></div>
</div>
</div>
</div>
<!-- End Sidebar -->
<main id="content" role="main" class="span6">
<!-- Begin Content -->
<div id="system-message-container">
</div>
<div class="item-page" itemscope itemtype="http://schema.org/Article">
<meta itemprop="inLanguage" content="en-GB" />
<div class="icons">
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span><span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="edit-icon"> <a href="/index.php/home?task=article.edit&a_id=25&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" ><span class="hasTooltip icon-edit tip" title="<strong>Edit Article</strong><br />Published<br />Monday, 27 April 2015<br />Written by Chris Cavaco"></span>Edit</a> </li>
</ul>
</div>
</div>
<div itemprop="articleBody">
<h2><img src="/images/social-intranet-new.png" alt="social intranet new" /></h2>
<h1>Welcome to the new ICG Intranet!</h1>
<p>Take some time to explore the different pages and functionality. </p>
<p>Click on the <img src="/images/Mobile_3bar_icon.png" alt="3bar icon" width="17" height="17" /><a href="#" id="offcanvas-toggler" style="background-color: #ffffff;"> = </a> in the corner of the menu to see useful links</p>
<p>Send us suggestions by filling by submitting items in the Suggestion Box to the left. </p>
<p>Everything here is new, so if you find something that doesn't work as expected, fill out a <a href="/index.php/mnu-it-tt/create-trouble-ticket?view=form&layout=edit">Trouble Ticket</a> which can be accessed on the IT menu.</p>
<p>We'll be continually adding content so check here every day for announcements and to see what's new.</p> </div>
</div>
<!-- End Content -->
</main>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<div class="well jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=87&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br /> Turn Times<br />Position: position-7"><h3 class="page-header"> Turn Times</h3>
<div class="custom" >
<p><strong><span style="font-size: medium;"><span style="font-size: small;">Current Underwriting Turn Times</span><br /></span></strong><em><span style="font-size: x-small;">New Submissions-----48 hours<br />UW Conditions ----- 48 hours</span></em></p>
<p><span style="font-size: x-small;">This information is based on BUSINESS days.</span></p>
<p><span style="font-size: x-small;">Please keep in mind that volume received on each day can adjust the turn times on a daily basis.<br /></span></p></div>
</div><div class="well jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=122&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Stock<br />Position: position-7">
<div class="custom" >
<p><span class="nn_tooltips-link hover" data-toggle="popover" data-html="true" data-template="<div class="popover nn_tooltips "><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>" data-placement="top" data-content="<img src="http://chart.finance.yahoo.com/t?s=^TNX&amp;lang=en-US&amp;region=US&amp;width=300&amp;height=180" alt="" />" title=""> 10 Year Treasury Note (^TNX)</span> <style>table,td { text-align:center; style="shrink";}</style><table class="table table-condensed table-striped table-bordered "><TR><TD><font size = "4">Last</font></TD><TD><font size = "4">Change</font></TD></TR><tr><td cellpadding="10"><font color="3399FF">2.13</font><font size = "1%">(2:50pm)</font></td><td><font color ="00CC33">+0.01</font></table><hr><style>table,td { text-align:center; width=10px;}</style><table class="table table-striped table-bordered table-condensed"><TR><TD><font size = "1"> Open </font></TD><TD><font size = "1"> High </font></TD><TD><font size = "1"> Low </font></TR></TD><tr><td><font size = "1">2.12</font></td><td><font size = "1">2.14</font></td><td><font size = "1">2.09</font></td></table>
</p></div>
</div>
<!-- End Right Sidebar -->
</div>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span6">
<div class="custom threeacross">
<!-- JoomlaWorks "Simple RSS Feed Reader" Module (v3.3) starts here -->
<div class="srfrContainer threeacross">
<ul class="srfrList">
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/05042015_mortgage_monitor.asp">
Servicer Complaints Ebbing with Delinquencies
<span>
<b class="srfrTitle">Servicer Complaints Ebbing with Delinquencies</b>
Posted To: MND NewsWireBlack Knight's Mortgage Monitor report for May took a close look at complaint trends lodged with the Consumer Financial Protection Agency (CFPB). Along with the Five Star Institute, Black Knight compared complaints with corresponding mortgage servicing volume[…]
<br /><br />
Created on: <b>May 4, 2015 | 14:34 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 14:34 pm</span>
</div>
</li>
<li class="srfrRow srfrRowIsEven">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/469156.aspx">
MBS MID-DAY: Widespread Negative Reprices After Heavy Pressure from European Bonds
<span>
<b class="srfrTitle">MBS MID-DAY: Widespread Negative Reprices After Heavy Pressure from European Bonds</b>
Posted To: MBS CommentaryWith UK and Japan bank holidays, cash Treasuries didn't really have an overnight session (London and Tokyo are the hubs for Treasury trading during the European and Asian sessions respectively). This also affected volume and liquidity in[…]
<br /><br />
Created on: <b>May 4, 2015 | 13:28 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 13:28 pm</span>
</div>
</li>
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/channels/pipelinepress/05042015-preventing-mortgage-fraud.aspx">
Outsourcing QC; Fannie/Freddie News; Preventing Fraud; MI Earnings
<span>
<b class="srfrTitle">Outsourcing QC; Fannie/Freddie News; Preventing Fraud; MI Earnings</b>
Posted To: Pipeline PressBy now the remains of the pizza lunches for everyone working OT to deliver a successful April have been cleared away, and lenders are optimistic about May - especially those who have remained loyal to pursuing the[…]
<br /><br />
Created on: <b>May 4, 2015 | 09:53 am</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 09:53 am</span>
</div>
</li>
<li class="srfrRow srfrRowIsEven">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/469034.aspx">
MBS Week Ahead: Important Week for Fed Comments, Econ Data, and Trend Watching
<span>
<b class="srfrTitle">MBS Week Ahead: Important Week for Fed Comments, Econ Data, and Trend Watching</b>
Posted To: MBS CommentaryAfter rising to the highest side of the long term trend last week, yields have a chance to explode higher, or re-commit to the range this week. "Exploding higher" could be problematic, or course, but it's good[…]
<br /><br />
Created on: <b>May 4, 2015 | 07:34 am</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 07:34 am</span>
</div>
</li>
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/468736.aspx">
MBS RECAP: Exactly What We Were Hoping NOT to See
<span>
<b class="srfrTitle">MBS RECAP: Exactly What We Were Hoping NOT to See</b>
Posted To: MBS CommentaryToday wasn't necessarily a worst-case-scenario for bond markets, but it was reading from the same script. It's the version of the story where the economic data is weaker than expected, but where bonds sold off anyway. From[…]
<br /><br />
Created on: <b>May 1, 2015 | 16:35 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 1, 2015 | 16:35 pm</span>
</div>
</li>
</ul>
</div>
<div class="clr"></div>
<!-- JoomlaWorks "Simple RSS Feed Reader" Module (v3.3) ends here -->
<div class="well threeacross jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=115&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Timecard<br />Position: position-11"><h3 class="page-header">Timecard</h3>
<div class="custom threeacross" >
<p><a href="https://portal.adp.com/public/index.htm">Timecard Login</a><a href="https://portal.adp.com/public/index.htm"><img src="http://www.kuacademy.com/Help/ADP/assets/ADP-logo.png" alt="" /></a></p></div>
</div>
</div>
</div>
<!-- End Sidebar -->
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container-fluid">
<hr />
<p class="pull-right">
<a href="#top" id="back-top">
Back to Top </a>
</p>
<p>
© 2015 intranet </p>
</div>
</footer>
<noscript><strong>JavaScript is currently disabled.</strong>Please enable it for a better experience of <a href="http://2glux.com/projects/jumi">Jumi</a>.</noscript></body>
</html>
Protostar 基于 Bostrap，您可以使用它的网格系统。这是获得所需内容的一种方法。
<div class="row">
<div class="col-sm-4">
<!-- col-sm-4 means "one-third column if screen is wider than 768px, stacked otherwise -->
<?php if ($this->countModules('position-10')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3" style="clear: none; display: block">
<jdoc:include type="modules" name="position-10" style="well" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if ($this->countModules('position-11')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3" style="clear: both; display: block">
<jdoc:include type="modules" name="position-11" style="xhtml" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if ($this->countModules('position-12')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3">
<jdoc:include type="modules" name="position-12" style="xhtml" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
</div>
请注意，我已经删除了您多余的结束标记。
如果你想玩多一点，这里有 BootStrap 网格系统文档：
我需要一些帮助来弄清楚如何配置以下代码，该代码创建三个自定义位置以水平而不是垂直内嵌显示，如下图所示（抵押日报、登录和考勤卡占用三个位置）。这是 Index.php 文件中的代码。自定义位置是代码中的位置 10、11 和 12。
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="position-1" style="none" />
</nav>
<?php endif; ?>
<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span; ?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
<?php if ($this->countModules('position-9')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3">
<jdoc:include type="modules" name="position-9" style="well" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-10')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3" style="clear: none; display: block">
<jdoc:include type="modules" name="position-10" style="well" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-11')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3" style="clear: both; display: block">
<jdoc:include type="modules" name="position-11" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<?php if ($this->countModules('position-12')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3">
<jdoc:include type="modules" name="position-12" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
HTML 被请求
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="http://intranet.icghome.com/index.php/home" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Chris Cavaco" />
<meta name="description" content="ICG Intranet" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Home</title>
<link href="/templates/protostar/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/media/tooltips/css/style.min.css" type="text/css" />
<link rel="stylesheet" href="/templates/protostar/css/template.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_jw_srfr/tmpl/compact/css/template.css" type="text/css" />
<link rel="stylesheet" href="/media/system/css/frontediting.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_marqueeaholic/css/marquee.css" type="text/css" />
<style type="text/css">
.nn_tooltips-link {border-bottom: 1px solid #cccccc;} .nn_tooltips.popover {max-width: 600px;z-index: 10000;}
</style>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/tooltips/js/script.min.js" type="text/javascript"></script>
<script src="/templates/protostar/js/template.js" type="text/javascript"></script>
<script src="/media/system/js/frontediting.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.marquee.min.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.pause.js" type="text/javascript"></script>
<script src="/modules/mod_marqueeaholic/js/jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
jQuery(document).ready(function()
{
jQuery('.hasPopover').popover({"html": true,"trigger": "hover focus","container": "body"});
});
window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r){r.open("GET","./",true);r.send(null)}},1740000);
</script>
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,h2,h3,h4,h5,h6,.site-title{
font-family: 'Open Sans', sans-serif;
}
</style>
<style type="text/css">
body.site
{
border-top: 3px solid #0088cc;
background-color: #f4f6f7 }
a
{
color: #0088cc;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: #0088cc;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<!--[if lt IE 9]>
<script src="/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="site com_content view-article no-layout no-task itemid-101 fluid">
<!-- Body -->
<div class="body">
<div class="container-fluid">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="/">
<img src="http://intranet.icghome.com/images/icg2.PNG" alt="intranet" /> </a>
<div class="header-search pull-right">
</div>
</div>
</header>
<nav class="navigation" role="navigation">
<ul class="nav menu nav-pills jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=1&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Main Menu<br />Position: position-1">
<li class="item-101 current active"><a href="/index.php/home" ><span>Home</span></a></li><li class="item-156 dropdown deeper parent"><a class=" dropdown-toggle" data-toggle="dropdown" href="#" ><span>Departments<b class="caret"></b></span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-269"><a href="/index.php/home-acct" ><span>Accounting</span></a></li><li class="item-270"><a href="/index.php/home-hr" ><span>Human Resources</span></a></li><li class="item-268"><a href="/index.php/it-home" ><span>IT</span></a></li><li class="item-160 dropdown-submenu deeper parent"><a href="/index.php/dept/ops" ><span>Operations</span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-271"><a href="/index.php/compliance" ><span>Compliance</span></a></li><li class="item-273"><a href="/index.php/home-qc" ><span>Quality Control</span></a></li><li class="item-272"><a href="/index.php/home-proc" ><span>Processing</span></a></li><li class="item-274"><a href="/index.php/home-pc" ><span>Post Closing</span></a></li><li class="item-275"><a href="/index.php/home-sec" ><span>Secondary</span></a></li><li class="item-276"><a href="/index.php/home-uw" ><span>Underwriting</span></a></li></ul></li><li class="item-277"><a href="/index.php/sales" ><span>Sales</span></a></li></ul></li><li class="item-109"><a href="/index.php/branch-list" ><span>Branch List</span></a></li><li class="item-110"><a href="/index.php/employee-directory" ><span>Employee Directory</span></a></li><li class="item-261"><a href="/index.php/announcements" ><span>Announcements</span></a></li></ul>
</nav>
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=114&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Announcements<br />Position: banner">
<script type="text/javascript">
jQuery(function(){
var $mwo = jQuery('.marquee-with-options');
jQuery('.marquee').marquee();
jQuery('.marquee-with-options').marquee({
speed: 10000, //speed in milliseconds of the marquee
gap: 50, //gap in pixels between the tickers
delayBeforeStart: 0, //gap in pixels between the tickers
direction: 'left', //'left' or 'right'
duplicated: 0, //true or false - should the marquee be duplicated to show an effect of continues flow
pauseOnHover: 1 //on hover pause the marquee
});
});
</script>
<style>
.marquee-with-options {color: #ebebeb; font-family:Arial, Helvetica, sans-serif; font-size: ; line-height: auto; width: 940px; background: #0985f2; border: groove #; margin-bottom: 0px; text-decoration: none;}
.marquee-with-options a {color: #ebebeb;}
</style>
<div class='marquee-with-options '>This Week's Birthdays -- <b> Jack Daniels</b> 5/4 <b>Dustin DiMisa </b> 5/6 <b>Charles Foley</b> 5/6
<b> Rosemary Cowan </b> 5/8</div>
</div>
<div class="row-fluid">
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=16&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Login Form<br />Position: position-8">
<form action="http://intranet.icghome.com/index.php/home" method="post" id="login-form" class="form-vertical">
<div class="login-greeting">
Hi Jake Nolan, </div>
<div class="logout-button">
<input type="submit" name="Submit" class="btn btn-primary" value="Log out" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.logout" />
<input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD0xMDEmb3B0aW9uPWNvbV9jb250ZW50" />
<input type="hidden" name="b42506b697bf46bf6ca4e7fa65ed4c15" value="1" /> </div>
</form>
</div>
<div class="moduletable jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=154&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Main-left<br />Position: position-8">
<div class="custom" >
<p><a href="https://mail.google.com/mail" target="_blank"><br /><img src="http://icons.iconarchive.com/icons/wwalczyszyn/android-style-honeycomb/128/GMail-icon.png" alt="" width="29" height="29" /></a><a href="https://mail.google.com/mail" target="_blank" style="text-align: justify;">Access GMail</a><a href="https://mail.google.com/mail" target="_blank"></a></p>
<p><a href="https://mail.google.com/mail" target="_blank"></a></p>
<hr align="left" width="34%" />
<p style="text-align: left;"><a href="https://mail.google.com/mail" target="_blank"><img src="http://dentrix.com/uploads/icons/background/png/Suggestion-Box.png" alt="" width="33" height="33" /></a><a href="/index.php/suggestions">Suggestions</a></p></div>
</div>
</div>
</div>
<!-- End Sidebar -->
<main id="content" role="main" class="span6">
<!-- Begin Content -->
<div id="system-message-container">
</div>
<div class="item-page" itemscope itemtype="http://schema.org/Article">
<meta itemprop="inLanguage" content="en-GB" />
<div class="icons">
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span><span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="edit-icon"> <a href="/index.php/home?task=article.edit&a_id=25&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" ><span class="hasTooltip icon-edit tip" title="<strong>Edit Article</strong><br />Published<br />Monday, 27 April 2015<br />Written by Chris Cavaco"></span>Edit</a> </li>
</ul>
</div>
</div>
<div itemprop="articleBody">
<h2><img src="/images/social-intranet-new.png" alt="social intranet new" /></h2>
<h1>Welcome to the new ICG Intranet!</h1>
<p>Take some time to explore the different pages and functionality. </p>
<p>Click on the <img src="/images/Mobile_3bar_icon.png" alt="3bar icon" width="17" height="17" /><a href="#" id="offcanvas-toggler" style="background-color: #ffffff;"> = </a> in the corner of the menu to see useful links</p>
<p>Send us suggestions by filling by submitting items in the Suggestion Box to the left. </p>
<p>Everything here is new, so if you find something that doesn't work as expected, fill out a <a href="/index.php/mnu-it-tt/create-trouble-ticket?view=form&layout=edit">Trouble Ticket</a> which can be accessed on the IT menu.</p>
<p>We'll be continually adding content so check here every day for announcements and to see what's new.</p> </div>
</div>
<!-- End Content -->
</main>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<div class="well jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=87&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br /> Turn Times<br />Position: position-7"><h3 class="page-header"> Turn Times</h3>
<div class="custom" >
<p><strong><span style="font-size: medium;"><span style="font-size: small;">Current Underwriting Turn Times</span><br /></span></strong><em><span style="font-size: x-small;">New Submissions-----48 hours<br />UW Conditions ----- 48 hours</span></em></p>
<p><span style="font-size: x-small;">This information is based on BUSINESS days.</span></p>
<p><span style="font-size: x-small;">Please keep in mind that volume received on each day can adjust the turn times on a daily basis.<br /></span></p></div>
</div><div class="well jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=122&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Stock<br />Position: position-7">
<div class="custom" >
<p><span class="nn_tooltips-link hover" data-toggle="popover" data-html="true" data-template="<div class="popover nn_tooltips "><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>" data-placement="top" data-content="<img src="http://chart.finance.yahoo.com/t?s=^TNX&amp;lang=en-US&amp;region=US&amp;width=300&amp;height=180" alt="" />" title=""> 10 Year Treasury Note (^TNX)</span> <style>table,td { text-align:center; style="shrink";}</style><table class="table table-condensed table-striped table-bordered "><TR><TD><font size = "4">Last</font></TD><TD><font size = "4">Change</font></TD></TR><tr><td cellpadding="10"><font color="3399FF">2.13</font><font size = "1%">(2:50pm)</font></td><td><font color ="00CC33">+0.01</font></table><hr><style>table,td { text-align:center; width=10px;}</style><table class="table table-striped table-bordered table-condensed"><TR><TD><font size = "1"> Open </font></TD><TD><font size = "1"> High </font></TD><TD><font size = "1"> Low </font></TR></TD><tr><td><font size = "1">2.12</font></td><td><font size = "1">2.14</font></td><td><font size = "1">2.09</font></td></table>
</p></div>
</div>
<!-- End Right Sidebar -->
</div>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span6">
<div class="custom threeacross">
<!-- JoomlaWorks "Simple RSS Feed Reader" Module (v3.3) starts here -->
<div class="srfrContainer threeacross">
<ul class="srfrList">
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/05042015_mortgage_monitor.asp">
Servicer Complaints Ebbing with Delinquencies
<span>
<b class="srfrTitle">Servicer Complaints Ebbing with Delinquencies</b>
Posted To: MND NewsWireBlack Knight's Mortgage Monitor report for May took a close look at complaint trends lodged with the Consumer Financial Protection Agency (CFPB). Along with the Five Star Institute, Black Knight compared complaints with corresponding mortgage servicing volume[…]
<br /><br />
Created on: <b>May 4, 2015 | 14:34 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 14:34 pm</span>
</div>
</li>
<li class="srfrRow srfrRowIsEven">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/469156.aspx">
MBS MID-DAY: Widespread Negative Reprices After Heavy Pressure from European Bonds
<span>
<b class="srfrTitle">MBS MID-DAY: Widespread Negative Reprices After Heavy Pressure from European Bonds</b>
Posted To: MBS CommentaryWith UK and Japan bank holidays, cash Treasuries didn't really have an overnight session (London and Tokyo are the hubs for Treasury trading during the European and Asian sessions respectively). This also affected volume and liquidity in[…]
<br /><br />
Created on: <b>May 4, 2015 | 13:28 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 13:28 pm</span>
</div>
</li>
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/channels/pipelinepress/05042015-preventing-mortgage-fraud.aspx">
Outsourcing QC; Fannie/Freddie News; Preventing Fraud; MI Earnings
<span>
<b class="srfrTitle">Outsourcing QC; Fannie/Freddie News; Preventing Fraud; MI Earnings</b>
Posted To: Pipeline PressBy now the remains of the pizza lunches for everyone working OT to deliver a successful April have been cleared away, and lenders are optimistic about May - especially those who have remained loyal to pursuing the[…]
<br /><br />
Created on: <b>May 4, 2015 | 09:53 am</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 09:53 am</span>
</div>
</li>
<li class="srfrRow srfrRowIsEven">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/469034.aspx">
MBS Week Ahead: Important Week for Fed Comments, Econ Data, and Trend Watching
<span>
<b class="srfrTitle">MBS Week Ahead: Important Week for Fed Comments, Econ Data, and Trend Watching</b>
Posted To: MBS CommentaryAfter rising to the highest side of the long term trend last week, yields have a chance to explode higher, or re-commit to the range this week. "Exploding higher" could be problematic, or course, but it's good[…]
<br /><br />
Created on: <b>May 4, 2015 | 07:34 am</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 4, 2015 | 07:34 am</span>
</div>
</li>
<li class="srfrRow srfrRowIsOdd">
<a target="_blank" href="http://www.mortgagenewsdaily.com/mortgage_rates/blog/468736.aspx">
MBS RECAP: Exactly What We Were Hoping NOT to See
<span>
<b class="srfrTitle">MBS RECAP: Exactly What We Were Hoping NOT to See</b>
Posted To: MBS CommentaryToday wasn't necessarily a worst-case-scenario for bond markets, but it was reading from the same script. It's the version of the story where the economic data is weaker than expected, but where bonds sold off anyway. From[…]
<br /><br />
Created on: <b>May 1, 2015 | 16:35 pm</b>
<br />
</span>
</a>
<div class="srfrFeedDetails">
<span class="srfrFeedItemDate">May 1, 2015 | 16:35 pm</span>
</div>
</li>
</ul>
</div>
<div class="clr"></div>
<!-- JoomlaWorks "Simple RSS Feed Reader" Module (v3.3) ends here -->
<div class="well threeacross jmoddiv" data-jmodediturl="http://intranet.icghome.com/index.php?option=com_advancedmodules&id=115&return=aHR0cDovL2ludHJhbmV0LmljZ2hvbWUuY29tL2luZGV4LnBocC9ob21l" data-jmodtip="<strong>Edit module</strong><br />Timecard<br />Position: position-11"><h3 class="page-header">Timecard</h3>
<div class="custom threeacross" >
<p><a href="https://portal.adp.com/public/index.htm">Timecard Login</a><a href="https://portal.adp.com/public/index.htm"><img src="http://www.kuacademy.com/Help/ADP/assets/ADP-logo.png" alt="" /></a></p></div>
</div>
</div>
</div>
<!-- End Sidebar -->
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container-fluid">
<hr />
<p class="pull-right">
<a href="#top" id="back-top">
Back to Top </a>
</p>
<p>
© 2015 intranet </p>
</div>
</footer>
<noscript><strong>JavaScript is currently disabled.</strong>Please enable it for a better experience of <a href="http://2glux.com/projects/jumi">Jumi</a>.</noscript></body>
</html>
Protostar 基于 Bostrap，您可以使用它的网格系统。这是获得所需内容的一种方法。
<div class="row">
<div class="col-sm-4">
<!-- col-sm-4 means "one-third column if screen is wider than 768px, stacked otherwise -->
<?php if ($this->countModules('position-10')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="pagebottom" class="span3" style="clear: none; display: block">
<jdoc:include type="modules" name="position-10" style="well" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if ($this->countModules('position-11')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3" style="clear: both; display: block">
<jdoc:include type="modules" name="position-11" style="xhtml" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
<div class="col-sm-4">
<?php if ($this->countModules('position-12')) : ?>
<!--custom position 14 'pagebottom' -->
<div id="aside" class="span3">
<jdoc:include type="modules" name="position-12" style="xhtml" />
</div>
<!-- End Sidebar -->
<?php endif; ?>
</div>
</div>
请注意，我已经删除了您多余的结束标记。
如果你想玩多一点，这里有 BootStrap 网格系统文档：