使用引导容器布局

-3

我想创建一个布局，将适当调整，无论窗口的大小，分辨率等这里就是我想要做：使用引导容器布局

html, body { 
     border: 0px; 
     margin: 0px; 
     padding: 0px; 
     height:100%; 
    } 
    .container{ 
     height:100%; 
     display:table; 
     width: 80%; 
    } 
    .row{  
     display: table-row; 
    } 
    @media (min-width: 992px) { 
     .row .no-float { 
     display: table-cell; 
     float: none; 
     } 
    } 
    .col-md-9 { 
     background: #A28DFF; 
     height:100%;  
    } 
    .navbar { 
     margin-bottom: 0; 
    } 

    </style> 

<div class="container"> 
    <div class ="row " style="border:0px solid red;"> 
     <div class=" no-float" style="border:0px solid green; height:1px;"> 
      <!-- code for my nav bar --> 
     </div>   
    </div> 
    <div class="row">   
     <div class="col-md-9 no-float" style="padding-top:50px"> 
      <!-- code for my content --> 
     </div> 
    </div> 
</div>

问题但是，它不能正确调整大小。如果页面变得太小，则工具栏行和内容行将分开，不会彼此调整大小，也不会保持在一起。任何人都可以帮助提示如何使这个布局响应调整大小？

这里是一个的jsfiddle：https://jsfiddle.net/4qj7a3bh/13/

来源

2017-11-25 jason

你能使codepen，jsbin或别的东西，所以我们可以看到在行动代码？ – Zvezdas1989

我已添加jsFiddle。如果你看看它，并调整输出窗口的大小，你会发现div不会保持对齐。谢谢 – jason

如果你投降或投票结束这篇文章，你能解释为什么吗？这样做没有评论不会帮助任何人。谢谢 – jason

因此，我们的结论是，你是不是很有经验的引导，所以我为你做这个代码。这里是如何使用bootstrap的例子，你也应该探索他们的网格系统，这样你可以更好地理解代码。你也应该避免直接定位引导类，除非它是绝对必要的。

<div class="container mainC"> 
    <div id="toolbar" class="row text-center col-md-10 col-md-offset-1"> 
    <h2>Toolbar section</h2> 
    </div> 
    <div id="content" class="row text-center col-md-10 col-md-offset-1"> 
    <h2>Content section</h2> 
    </div> 
</div> 

#toolbar { 
    background: cyan; 
} 

#content { 
    background: yellow; 
}

下面是codepen所以你可以看到在行动代码： https://codepen.io/anon/pen/vWaKxZ

来源

2017-11-25 20:05:10 Zvezdas1989

谢谢。是的，我是Bootstrap的新手。这看起来不错，但唯一不同的是我试图让第二个div延伸到页面的底部。有没有办法做到这一点，而不直接更改Bootstrap类？再次感谢！ – jason

是的，还有更多的方法来实现这种效果，但是当你添加内容时，如果你想要使用视图高度CSS属性来实现这一点，它将自行扩展，视图高度将总是基于你窗口的高度来扩展想象它就像是类似的东西百分比。例如：https://codepen.io/anon/pen/eejzeY – Zvezdas1989

谢谢。这就是我一直在寻找的！ – jason

使用引导容器布局

回答

相关问题