bootstrap css-两列内容调整大小问题

克拉普萨德

我在网页的主要区域中有两列。左侧是包含链接的侧边栏。右一包含基于链接目标的内容。

我需要使左列和右列具有相同的高度,而不管其内容的数量如何。我也想使右列填充容器的右侧。

我认为提供最小高度或宽度会使设计无响应吗?

请在启动时查看以下演示。在下面的演示中,我输入了min-height,它使它无响应,因为在小型设备上查看时,左侧栏占据了很大的空间。

任何建议表示赞赏。

http://www.bootply.com/qWIEIbi93o

齐姆

一种解决方案是使用CSS flexbox和媒体查询,以便equal类应用于更大的屏幕宽度。

@media screen and (min-width: 768px) {
  .equal, .equal > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 1 auto;
  }
}

更新的Bootply:http : //www.bootply.com/lyqtWesQhC

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap Css Mobile首先调整大小问题

来自分类Dev

Bootstrap输入组调整大小问题

来自分类Dev

CSS图像调整大小问题

来自分类Dev

列大小问题内的Bootstrap列

来自分类Dev

Bootstrap多行标签导致列大小问题

来自分类Dev

Bootstrap CSS填充问题

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

Bootstrap Navbar CSS问题

来自分类Dev

Bootstrap Navbar CSS问题

来自分类Dev

CSS Bootstrap全屏问题

来自分类Dev

与文档中的Bootstrap 3垂直词缀菜单示例-调整大小问题

来自分类Dev

调整大小时如何阻止Bootstrap 4的网格将列内容分成两部分?

来自分类Dev

使用Bootstrap CSS调整标签

来自分类Dev

纯CSS3媒体查询的IE9响应图像调整大小问题

来自分类Dev

纯CSS3媒体查询的IE9响应图像调整大小问题

来自分类Dev

Flaticon CSS图标大小问题

来自分类Dev

基础CSS输入大小问题

来自分类Dev

CSS 最大宽度文本大小问题

来自分类Dev

CSS HTML Bootstrap布局问题

来自分类Dev

Bootstrap-表CSS问题

来自分类Dev

CSS Bootstrap Glyphicon对齐问题

来自分类Dev

css / bootstrap:溢出问题

来自分类Dev

CSS / Bootstrap div布局问题

来自分类Dev

Bootstrap CSS行对齐问题

来自分类Dev

CSS Bootstrap Glyphicon对齐问题

来自分类Dev

如何在bootstrap.css中调整容器大小

来自分类Dev

Bootstrap CSS / HTML背景图片调整大小

来自分类Dev

Twitter Bootstrap 3:不同大小的不同CSS