Twitter bootstrap 3两列全高 [英] Twitter bootstrap 3 two columns full height

问题描述

我想使用twitter bootstrap 3制作两栏式的全高布局。 twitter bootstrap 3 似乎不支持全高度布局。
我想做什么：

  + --------------- ---------------------------------- + 
 |标题| 
 + ------------ + -------------------------------- ---- + 
 | | | 
 | | | 
 | Navigation |内容| 
 | | | 
 | | | 
 | | | 
 | | | 
 | | | 
 | | | 
 + ------------ + -------------------------------- ---- + 
  

如果内容增长，导航也应该增长。

• 每个家长的身高100％无效，因为内容为一行。


• position绝对似乎是错误的方式


• display：table
  
  
  
  
  
  
  
  b

   < div class =container> 
  < div class =row> 
  < div class =col-md-3>< / div> 
  < div class =col-md-9>< / div> 
  < / div> 
  < / div>有没有办法使用默认的 twitter bootstrap 3 类？   / p> 
   
  解决方案
   免责声明： 
   
   
   
   
   
   
   display：table和display table-cell不起作用
   
   
   
   
   
   ...排序暗示如果 工作 - 那就足够...这是为什么我发布了这个答案）
   
   
   
   
   
   
  本地Bootstrap 3.0类不支持您描述的布局，但是，我们可以集成一些自定义CSS使用 css表实现此目的。
   
   
   
     Bootply demo   /   Codepen   
   
   
   
  标记：
   
   
   
   < header>标题< / header> 
  < div class =container> 
  < div class =row> 
  < div class =col-md-3 no-float> Navigation< / div> 
  < div class =col-md-9 no-float>内容< / div> 
  < / div> 
  < / div> 
    
   
   
   
  （相关）CSS 
   
   
   
    html，body，.container {
   height：100％; 
  } 
   .container {
   display：table; 
   width：100％; 
   margin-top：-50px; 
   padding：50px 0 0 0; / *根据需要设置左/右填充* / 
   box-sizing：border-box; 
  } 
   
   .row {
   height：100％; 
   display：table-row; 
  } 
   
   .row .no-float {
   display：table-cell; 
   float：none; 
  } 
    
  上述代码将实现全高列 （由于我们添加的自定义css表格属性）以及中等屏幕宽度及以上的比率1：3 （导航：内容） class：col-md-3 and col-md-9）
   
   
   
   注意： 
   
   
   
    1）为了不混乱bootstrap的本地列类，我们在标记中添加了另一个类 no-float  code> display：table-cell 和 float：none  > 
   
   
    2）如果我们只想针对特定中断点（例如中等屏幕宽度及以上）使用CSS表格代码，我们希望默认回到通常的引导行为，我们可以在媒体查询中包装我们的自定义CSS，如：
    @media （min-width：992px）{
   .row .no-float {
   display：table-cell; 
   float：none; 
  } 
  } 
    
   
   
   
    Codepen演示 
   
   
   
  现在，对于较小的屏幕，列将像默认引导列
    3）如果1：3的比例对于所有的屏幕宽度都是必要的 - 那么最好删除bootstrap的col-md- * 
   
   
   
    Codepen演示 
   
  I'm trying to make two-column full-height layout with twitter bootstrap 3. It seems that twitter bootstrap 3 does not support full height layouts.
  What I want to do:
    +-------------------------------------------------+
    |                     Header                      |
    +------------+------------------------------------+
    |            |                                    |
    |            |                                    |
    |Navigation  |         Content                    |
    |            |                                    |
    |            |                                    |
    |            |                                    |
    |            |                                    |
    |            |                                    |
    |            |                                    |
    +------------+------------------------------------+
  If the content grows, the nav should also grow. 
  
  
  Height 100% for every parent doesn't work because there is the case where content is one line.
  position absolute seems to be the wrong way
  display: table and display:table-cell, but it is not elegantly
  
  
  html:
      <div class="container">
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9"></div>
        </div>
      </div>
  Is there way to make it with default twitter bootstrap 3 classes?
  解决方案
  Disclaimer:
  
  (Originally the question stated 
  
    
  display: table and display table-cell for columns doesn't work
  ...sort-of implying that if it would work - then that would be sufficient... which is why I posted this answer)
  
  
  
  The native Bootstrap 3.0 classes don't support the layout that you describe,  however, we can integrate some custom CSS which make use of css tables to achieve this.
  
  Bootply demo / Codepen
  
  Markup:
  
  <header>Header</header>
  <div class="container">
      <div class="row">
          <div class="col-md-3 no-float">Navigation</div>
          <div class="col-md-9 no-float">Content</div>
      </div>
  </div>
  
  
  (Relevant) CSS
  
  html,body,.container {
      height:100%;
  }
  .container {
      display:table;
      width: 100%;
      margin-top: -50px;
      padding: 50px 0 0 0; /*set left/right padding according to needs*/
      box-sizing: border-box;
  }
  
  .row {
      height: 100%;
      display: table-row;
  }
  
  .row .no-float {
    display: table-cell;
    float: none;
  }
  The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9) 
  
  NB: 
  
  1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).
  
  2) If we only want to use the  css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:
  @media (min-width: 992px) {
    .row .no-float {
        display: table-cell;
        float: none;
    }
  }
  
  
  Codepen demo
  
  Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).
  
  3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.
  
  Codepen demo
  
                          
  这篇关于Twitter bootstrap 3两列全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！