无法使Bootstrap 4水平表单按要求工作 [英] Cannot get Bootstrap 4 Horizontal Form to work as required
问题描述
如何制作简单的 Bootstrap水平表格在手机，平板电脑和计算机上正确显示.也就是说，我希望组合如示例中所示对齐，但是我不希望组合超出所需的大小，并且我只希望在标签和组合之间留出很小的空隙.然后，当屏幕尺寸太小而无法放入标签和组合框中时，我希望将它们堆叠起来.
How do I make a simple Bootstrap Horizontal Form that looks correct on phone, tablet and computer. Namely I want the combos to be aligned as shown in the example, but I don't want the combos larger than necessary, and I only want a small gap between label and combo. Then when screen size is too small to fit in label and combo I want them stacked.
具体来说，Boostrap示例用完了整个100％的宽度，我不希望那样，我不希望组合变得比必要的还要宽，并且我不希望标签和组合之间有很大的空隙.
Specifically the Boostrap example use up the whole 100% width I dont want that, I don't want the combo to be wider then necessary and I dont want a big gap between the label and the combo.
我尝试添加 col-auto ，但随后连击不再相互水平对齐.
I tried adding col-auto but then the combos no longer horizontally aligned with each other.
我现在尝试按照 https://getbootstrap.com/docs/4.1/components/forms/#column-sizing ，但是当它转到小型电话时，它并没有正确堆叠.
I have now tried adding col-[1-12] values for label and combo as described in https://getbootstrap.com/docs/4.1/components/forms/#column-sizing but then it didnt stack correctly when goes to small phone.
然后我尝试使用col-md，使总数小于12，但在主屏幕上看起来不正确，因为现在标签和组合都占据相同的空间，因此它们各自占据了一半的屏幕，并且彼此之间相距甚远
I then tried using col-md so the totals less than 12 but it doesn't look right on main screen because now both the label and combo take the same space so they have half the screen each and are nowhere near each other.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>
推荐答案
问题是Flexbox无法像表那样在行/列中工作.您可以使用col-sm-auto缩小每个标签以使其适合，但是标签/输入将不会垂直向下对齐页面...
The problem is that Flexbox doesn't work in rows/columns the way a Table does. You can use col-sm-auto to get each label to shrink-to-fit, but then the labels/inputs won't align vertically down the page...
听起来您想缩小标签列以适合最宽标签的宽度.可以通过将所有标签放在一列中并将输入内容放在另一列中来完成此操作，但是每个标签/输入内容不会在移动屏幕上堆叠在一起.
It sounds like you want to shrink the label column to fit the width of the widest label. This could be done by putting all the labels in 1 column, and inputs in another column, but then each label/input won't stack together on mobile screens.
对于此问题，没有完美的纯Bootstrap解决方案.您可以使用表格，CSS网格或@Toan Lu在注释中描述的选项.
There's no elegant Bootstrap-only solution to this problem. You can use Tables, CSS grid, or the option described by @Toan Lu in the comments.
引导网格选项
我建议只对标签使用col-sm-2或col-sm-3(使它们适合大约最宽的标签)，并使用text-truncate省略(...)溢出的文本，直到它们在移动设备上垂直堆叠. ..
I'd recommend simply using col-sm-2 or col-sm-3 for the labels (fitting them to approx. the widest label) and text-truncate to ellipsis(...) the overflowing text until they stack vertically on mobile...
<div class="form-row">
<label class="col-form-label col-sm-2 text-truncate">
Label
</label>
<div class="col-sm-3 col-md-2">
<select>..</select>
</div>
</div>
https://www.codeply.com/go/e3mDrmMv7k
表格选项
使用此选项，标签上使用width:1%，以便它们缩小到最宽的宽度.使用text-nowrap停止包装标签.每个表单行是一个d-table-row，每个标签是一个d-table-cell ...
With this option, the width:1% is used on the labels so that they shrink to the width of the widest. Use text-nowrap to stop the labels from wrapping. Each form row is a d-table-row and each label is a d-table-cell...
.col-form-label.d-sm-table-cell {
width: 1%;
}
<div class="container py-3">
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Genre
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Longer label here
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
</div>
https://www.codeply.com/go/e3mDrmMv7k (请参阅第二个选项)
https://www.codeply.com/go/e3mDrmMv7k (see 2nd option)
table选项使div成为tr/td，但也可以灵敏地工作，允许字段在移动设备上垂直堆叠.有关[d表类]的更多信息，(是Bootstrap 4的一部分: http://getbootstrap.com/docs/4.1/utilities/display/#notation ).
The table option makes the divs into tr/td but also works responsively allowing the fields to stack vertically on mobile. Read more on [d-table classes](Yes, part of Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).
CSS网格选项
另一种方法(非Bootstrap 4)正在使用CSS网格.将行设置为display:grid.对整个行使用2个grid-template-columns上的fr大小.
One other (non-Bootstrap 4) method is using CSS grid. Make the row display:grid Use the fr sizing on the 2 grid-template-columns across the row.
.d-grid {
display: grid;
grid-template-columns: 0fr 1fr;
}
https://www.codeply.com/go/9Z7Hg2tl1H
这篇关于无法使Bootstrap 4水平表单按要求工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
