twitter-bootstrap Bootstrap 4：仅一列的最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48764216/
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: Min-width only for one column
提问by Lucas Colombo
I've created a basic grid-based layout with Bootstrap 4.
我已经使用 Bootstrap 4 创建了一个基本的基于网格的布局。
I have two columns: Left and Right. The left column is a div.col-12.col-md-5and the right one is div.col-12.col-md-7. Thing is, the left column has a table inside and since tables are not that resizables I want the left column to have a min width of 460px (so the data in the table can always be seen correctly). But I do want the other column in the right to be fully responsive and that it keeps resizing (until screen size < md breakpoint -768px-).
我有两列：左列和右列。左列是 a div.col-12.col-md-5，右列是div.col-12.col-md-7。事情是，左列里面有一个表格，因为表格不是可以调整大小的，所以我希望左列的最小宽度为 460px（所以表格中的数据总是可以正确看到）。但我确实希望右侧的另一列能够完全响应并不断调整大小（直到屏幕大小 < md 断点 -768px-）。
My layout looks something like this:
我的布局看起来像这样：
To try to achieve that behavior I've created this piece of css:
为了尝试实现这种行为，我创建了这段 css：
@media (min-width: 768px) {
.min-width-460-md {
min-width: 460px;
}
}
And I've applied the .min-width-460-md class to the left column. So my html code looks something like the next one:
我已经将 .min-width-460-md 类应用于左列。所以我的 html 代码看起来像下一个：
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 col-md-7">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
The problem is that with this new class applied to the left column, when it reaches 460px it stops resizing (as I wanted to) but the right column is being positioned below the left one, like this:
问题是，将这个新类应用于左列，当它达到 460px 时，它会停止调整大小（如我所愿），但右列位于左列下方，如下所示：
I obviously don't want this to happen. What I really want is that when the left column reaches 460px it stops resizing but the right one keeps resizing until the screen reaches less than 768px -md- (then both columns will be col-12).
我显然不希望这种情况发生。我真正想要的是，当左列达到 460 像素时，它会停止调整大小，但右列会继续调整大小，直到屏幕小于 768 像素 -md-（那么两列都将是 col-12）。
Is there a way to do this with css + Bootstrap 4?
有没有办法用 css + Bootstrap 4 做到这一点？
Thanks in advance!
提前致谢！
回答by Zim
Simplest way is to use an auto-layoutcolumn (.col) on the right...
最简单的方法是在右侧使用自动布局列 ( .col)...
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md border">
<table class="table table-striped">
..
</table>
</div>
<div class="col bg-dark text-white">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
回答by WebDevBooster
Change col-md-5and col-md-7both to col-mdand remove your custom min-width-460-md. col-mdwill auto-adjust to table width on smaller screens and make both columns equal width when the screen gets a bit bigger.
将col-md-5andcol-md-7都更改为col-md并删除您的自定义min-width-460-md. col-md将自动调整到较小屏幕上的表格宽度，并在屏幕变大时使两列等宽。
For large screens, add the col-xl-5class to the table column.
对于大屏幕，将col-xl-5类添加到表列。
Click the "run code snippet" button below and expand to full page:
单击下面的“运行代码片段”按钮并展开到整页：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md col-xl-5 bg-secondary">
The following line will give this div 460px min-width. <br>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
<br>
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 col-md bg-warning">
Second column (it contains more resizable data, so no min-width required here). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex totam qui voluptatibus reiciendis possimus laboriosam dolor libero alias quasi sequi at voluptas, porro, obcaecati amet minima fuga consectetur facilis eligendi.
</div>
</div>
</section>回答by Rahul
This is simple issue. You can't use col-* col-md-*for this type of work. It's hard to display properly.
这是一个简单的问题。您不能col-* col-md-*用于此类工作。很难正确显示。
Check the snippet below.
检查下面的片段。
.new-section{
background-color: black;
color: white;
padding: 30px;
}
.new-section .row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
@media (min-width: 768px){
.new-section .row{
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.new-section .row .min-width-460-md,
.new-section .row .right-column{
padding-left: 15px;
padding-right: 15px;
}
.new-section .row .min-width-460-md{
border: 1px solid #f2f2f2;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media (min-width: 768px){
.new-section .row .min-width-460-md{
-ms-flex-preferred-size: 460px;
flex-basis: 460px;
}
}
.new-section .row .right-column{
width: 100%;
}<section class="container-fluid new-section">
<div class="row">
<div class="min-width-460-md">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="right-column">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>This is not proper solution with bootstra@4. This snippet is what you expected. Below code for bootstrap@4solution.
这不是正确的解决方案bootstra@4。这个片段是你所期望的。下面是bootstrap@4解决方案的代码。
@media (min-width: 768px) {
.min-width-460-md {
flex-basis: 460px !important;
max-width: 460px !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid">
<div class="row flex-md-row flex-md-nowrap">
<div class="col-12 min-width-460-md bg-secondary">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 bg-warning">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
