Twitter bootstrap 3两列全高

作者: 部落用户
发布时间: 2024-11-10 06:53:27 (23小时前)
转自：

13 条回复

0#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以通过它实现你想要的 <code> padding-bottom: 100%; margin-bottom: -100%; </code> 技巧，你能看到吗？ <a href="http://jsfiddle.net/W29Wh/" rel="noreferrer"> 这个 </A> 小提琴。 </p> <P> 我稍微改变了你的HTML，但你可以使用以下代码用自己的HTML实现相同的结果 </p> <pre> <code> .col-md-9 { overflow: hidden; } .col-md-3 { padding-bottom: 100%; margin-bottom: -100%; } </code> </pre> </DIV>

编辑
1#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 据我所知，您最多可以使用5种方法来完成此任务： </p> <OL> <LI> 使用CSS显示表/表格单元属性或使用实际表。 </LI> <LI> 在包装器中使用绝对定位元素。 </LI> <LI> 使用Flexbox显示属性，但截至今天，它仍然有 <a href="http://caniuse.com/#search=flexbox"> 部分支持 </A> </LI> <LI> 使用。模拟完整列高度 <a href="http://alistapart.com/article/fauxcolumns"> 人造柱技术 </A> 。 </LI> <LI> 使用填充/边距技术。 <a href="http://jsfiddle.net/scsGj/19/"> 见例子 </A> 。 </LI> </醇> <P> Bootstrap：我没有太多的经验，但我认为他们没有为此提供样式。 </p> <pre> <code> .row { overflow: hidden; height: 100%; } .row .col-md-3, .row .col-md-9 { padding: 30px 3.15% 99999px; float: left; margin-bottom: -99999px; } .row .col-md-3 p, .row .col-md-9 p { margin-bottom: 30px; } .col-md-3 { background: pink; left:0; width:25% } .col-md-9 { width: 75%; background: yellow; } </code> </pre> </DIV>

编辑
2#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 所以看来你最好的选择就是用 <code> padding-bottom </code> 反对否定 <code> margin-bottom </code> 战略。 </p> <P> 我做了两个例子。一个用 <code> <header> </code> 的<strong> <a href="http://jsfiddle.net/scsGj/25/" rel="nofollow"> 内 </A> </强> <code> .container </code> 和另一个有它的<strong> <a href="http://jsfiddle.net/scsGj/26/" rel="nofollow"> 外 </A> </强> 。 </p> <P> 两个版本都应该正常工作。注意使用以下内容 <code> @media </code> 查询，以便它删除较小屏幕上的额外填充... </p> <pre> <code> @media screen and (max-width:991px) { .content { padding-top:0; } } </code> </pre> <P> 除此之外，这些示例应该可以解决您的问题。 </p> </DIV>

编辑
3#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果在行之后将没有内容（采用整个屏幕高度），则使用该技巧 <code> position: fixed; height: 100% </code> 对于 <code> .col:before </code> 元素可能运作良好： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> header { background: green; height: 50px; } .col-xs-3 { background: pink; } .col-xs-3:before { background: pink; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } .col-xs-9 { background: yellow; } .col-xs-9:before { background: yellow; content: ' '; height: 100%; margin-left: -15px; /* compensates column's padding */ position: fixed; width: inherit; /* bootstrap column's width */ z-index: -1; /* puts behind content */ } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <header>Header</header> <div class="container-fluid"> <div class="row"> <div class="col-xs-3">Navigation</div> <div class="col-xs-9">Content</div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
4#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想到了一个微妙的变化，它不会改变默认的引导行为。我只有在需要它时才能使用它： </p> <pre> <code> .table-container { display: table; } .table-container .table-row { height: 100%; display: table-row; } .table-container .table-row .table-col { display: table-cell; float: none; vertical-align: top; } </code> </pre> <P> 所以我可以像这样使用它： </p> <pre> <code> <div class="container table-container"> <div class="row table-row"> <div class="col-lg-4 table-col"> ... </div> <div class="col-lg-4 table-col"> ... </div> <div class="col-lg-4 table-col"> ... </div> </div> </div> </code> </pre> </DIV>

编辑
5#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 纯CSS解决方案很简单，就像魅力十字浏览器一样。 </p> <P> 您只需在nav和content列中添加一个大的填充和一个同样大的负边距，然后将它们的行包装在隐藏溢出的类中。 <BR/> <a href="http://fiddle.jshell.net/panchroma/dGY9g/show/" rel="nofollow"> 实时视图 </A> <BR/> <a href="http://fiddle.jshell.net/panchroma/dGY9g/" rel="nofollow"> 编辑视图 </A> </p> <P> 的<strong> HTML </强> </p> <pre> <code> <div class="container"> <div class="row"> <div class="col-xs-12 header"><h1>Header</h1></div> </div> <div class="row col-wrap"> <div class="col-md-3 col"> <h1>Nav</h1> </div> <div class="col-md-9 col"> <h1>Content</h1> </div> </div> </div> </code> </pre> <P> 的<strong> CSS </强> </p> <pre> <code> .col{ margin-bottom: -99999px; padding-bottom: 99999px; } .col-wrap{ overflow: hidden; } </code> </pre> <P> 祝好运！ </p> </DIV>

编辑
6#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 现代而简单的解决方案： </p> <P> HTML： </p> <pre> <code> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-9"></div> </div> </div> </code> </pre> <P> CSS： </p> <pre> <code> .row{ display: flex; } </code> </pre> </DIV>

编辑
7#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <pre> <code> <div class="row row-offcanvas row-offcanvas-right"> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav Content</div> <div class="col-xs-12 col-sm-9">Content goes here</div> </div> </code> </pre> <P> 这使用Bootstrap 3所以不需要额外的CSS等...... </p> </DIV>

编辑
8#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这里没有提到抵消。 </p> <P> 您可以使用绝对位置左侧边栏。 </p> <P> <EM> CSS </EM> </p> <pre> <code> .sidebar-fixed{ width: 16.66666667%; height: 100%; } </code> </pre> <P> <EM> HTML </EM> </p> <pre> <code> <div class="row"> <div class="sidebar-fixed"> Side Bar </div> <div class="col-md-10 col-md-offset-2"> CONTENT </div> </div> </code> </pre> </DIV>

编辑
9#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你看过引导了吗？的<strong> <EM> AFIX </EM> </强> 在JAvascript的部分??? </p> <P> 我认为这将是最好的＆amp;最简单的解决方案。 </p> <P> 看看那里： <a href="http://getbootstrap.com/javascript/#affix" rel="nofollow"> http://getbootstrap.com/javascript/#affix </A> </p> </DIV>

编辑
10#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在尝试使用此处提供的代码后： <a href="http://cyberdesigncraft.com/bootstrap-3-grid-tutorial/" rel="nofollow"> Bootstrap教程 </A> </p> <P> 这是使用最新的另一种选择 <a href="https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip" rel="nofollow"> 引导 </A> V3.0.2： </p> <P> 的<strong> 标记： </强> </p> <pre> <code> <div id="headcontainer" class="container"> <p>Your Header</p> </div> <div id="maincontainer" class="container"> <div class="row"> <div class="col-xs-4"> <p>Your Navigation</p> </div> <div class="col-xs-8"> <p>Your Content</p> </div> </div> </div> </code> </pre> <P> 的<strong> 附加CSS： </强> </p> <pre> <code> #maincontainer, #headcontainer { width: 100%; } #headcontainer { background-color:#CCCC99; height: 150px } #maincontainer .row .col-xs-4{ background-color:gray; height:1000px } #maincontainer .row .col-xs-8{ background-color:green; height: 1000px } </code> </pre> <P> 样品 <a href="http://jsfiddle.net/zHRZr/4/" rel="nofollow"> 的jsfiddle </A> </p> <P> 希望这有助于任何感兴趣 </p> </DIV>

编辑
11#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <P> </p> <pre> <code> <div class="container">  </div> </div> <div class="row-fluid"> <div class="span3 well"> <ul class="nav nav-list"> <li class="nav-header">Our Services</li>  <li class="active"><a href="#">Overview</a></li> <li><a href="#">Android Applications</a></li> <li class="divider"></li> </ul> </div> <div class="span7 offset1">  </div> </div> </code> </pre> <P> 访问 <a href="http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/" rel="nofollow"> http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/ </A> </p> <P> 感谢Syed </p> </DIV>

编辑

登录后才能参与评论