引导 4.2.1 弹性框布局列溢出浏览器边缘

使用弹性基础作为列宽。为什么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（从width获取flex-basis - 设置为按.col 100%）

这会阻止该列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>

相关内容

最新更新

热门标签：