Html 具有一个宽度固定列的 Bootstrap 4 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46102630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 layout with one width fixed column
提问by Denis Stephanov
this is my html code:
这是我的 html 代码：
<div class="container-fluid d-flex h-100">
<div class="white h-100" style="background-color: white;">
fixed 100px
</div>
<div class="col-3 blue h-100" style="background-color: blue;">
3
</div>
<div class="col-6 red h-100" style="background-color: red;">
6
</div>
<div class="col-3 blue h-100" style="background-color: blue;">
3
</div>
</div>
Can you help me to fix my code please? I need on left side column with fixed width, which will be have 100px. This column have not resize. Rest of space I need to should be dynamically adjustable in ratio 1 : 2 : 1. Thanks for help.
你能帮我修复我的代码吗？我需要固定宽度的左侧列，它将有 100px。此列未调整大小。我需要的其余空间应该以 1 : 2 : 1 的比例动态调整。感谢您的帮助。
采纳答案by Jade Cowan
@Denis Stephanov, you can create a flex item that doesn't shrink or grow and has a fixed width, with the following css rule:
@Denis Stephanov，您可以使用以下 css 规则创建一个不会缩小或增长且具有固定宽度的 flex 项目：
.flex-fixed-width-item {
flex: 0 0 100px;
}
This is the short-hand for flex-grow, flex-shrink, and flex-basis. You can read more about these properties in this CSS-Tricks article.
这是短手flex-grow，flex-shrink和flex-basis。您可以在这篇CSS-Tricks 文章 中阅读有关这些属性的更多信息。
Adding that class to your fixed width column:
将该类添加到您的固定宽度列：
<div class="container-fluid d-flex h-100">
<div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
fixed 100px
</div>
...
Then keeping your column ratio the same:
然后保持您的列比率相同：
...
<div class="col-2 blue h-100" style="background-color: blue;">
2
</div>
<div class="col-4 red h-100" style="background-color: red;">
4
</div>
<div class="col-2 blue h-100" style="background-color: blue;">
2
</div>
</div>
You'll get your requested outcome, which you can view in this codeply project.
你会得到你要求的结果，你可以在这个codeply 项目中查看。
回答by merkdev
There is a built-in solution in bootstrap 4.
bootstrap 4 中有一个内置的解决方案。
Try this;
尝试这个;
<div class="container">
<div class="row">
<div class="col-12 col-md">
content
</div>
<div class="col-12 col-md-auto">
<div style="background: red; width: 300px;">
sidebar
</div>
</div>
</div>
</div>
回答by Solvitieg
Bootstrap 4 has this built into their layout components.
Bootstrap 4 已将其内置到其布局组件中。
<div class="container">
<div class="row">
<div class="col-4">
<!-- Set Width Column -->
</div>
<div class="col">
<!-- Variable Width Column -->
</div>
</div>
</div>
Reference: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width
参考：https: //getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width
If you would like your set width column to have a fixed pixel width, you can omit .col-4and add a custom pixel width class.
如果您希望设置的宽度列具有固定的像素宽度，则可以省略.col-4并添加自定义像素宽度类。
<div class="container">
<div class="row">
<div class="col-pixel-width-100">
<!-- Set Width Column -->
</div>
<div class="col">
<!-- Variable Width Column -->
</div>
</div>
</div>
// style.css
.col-pixel-width-100 { flex: 0 0 100px; }
