css - Bootstrap 4.2.1 Flex-box 布局列溢出浏览器边缘
问题描述
使用flex-basis作为列宽。为什么 COLUMN02 会超出浏览器的边缘?我究竟做错了什么?不幸的是,它没有显示在此处的代码片段中,但它显示在小提琴中。蒂亚!
http://jsfiddle.net/dragontheory/37b8vkoa/1/
html,
body {
min-height: 100vh;
/* force footer to bottom of browser */
height: 100%;
/*for IE11*/
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.column01 {
-webkit-box-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
background-color: rgba(0, 0, 0, 0.1);
}
.column02 {
-webkit-box-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col column01 d-flex flex-column">COLUMN01</div>
<div class="col column02 d-flex flex-column">COLUMN02</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
解决方案
这是您的自定义 CSS 造成的:
.column02 {
flex: 0 0 auto;
}
.col {
width: 100%;
}
...这转化为:
flex-grow: 0
(不允许 flex 增长这个元素)flex-shrink: 0
(不允许 flex 缩小这个元素)flex-basis: auto
(获取flex-basis
自width
- 设置为100%
by.col
)
无论子级s 的总和是否超过父级的事实,它都会将该列的 s阻止width
到width
其父级,并且不允许它缩小。width
width
设置以下任何一项.column02
将修复它:
flex-shrink: 1
width: auto; flex-grow: 1;
flex-basis: 0; flex-grow: 1;
flex: 1;
或者干脆删除flex: 0 0 auto;
(因为.col
已经设置flex-basis: 0; flex-grow: 1;
- 上面的第三种情况)。
添加:
为了使您的可调整大小的面板正常工作,我建议将整个所需的标记放在一列中:
$(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
})
html,
body {
min-height: 100vh;
height: 100%;
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 210px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 120px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
推荐阅读
- node.js - 首次连接时连接服务器失败
- html - 图像在某些移动设备中不合适,但在其他设备中合适
- node.js - 有没有办法使用 Dialogflow 的 Node.js 库来实现意图?
- assembly - 为什么使用 push/pop 而不是 sub 和 mov?
- parse-platform - 是否有用于 Objective-C 的预构建 Bolts.framework?
- r - ggplot2 - 使用 `geom_curve()` 和 `scale_alpha()` 时如何更改图例?
- wordpress - 如何使用简码解决 Learndash 聚焦模式
- r - 在同一图中绘制多个变量 lm()
- android - 显示相对布局的圆圈
- java - 错误:com.sun.crypto.provider.AESCipher$General 无法转换为 javax.crypto.CipherSpi