- 首页
- 前端开发
- 无法让 Bootstrap 4 Horizontal Form 按要求工作
无法让 Bootstrap 4 Horizontal Form 按要求工作
[英] Cannot get Bootstrap 4 Horizontal Form to work as required
本文介绍了无法让 Bootstrap 4 Horizontal Form 按要求工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何制作一个简单的
听起来您想缩小标签列以适应最宽标签的宽度.这可以通过将所有标签放在 1 列中并将输入放在另一列中来完成，但这样每个标签/输入不会在移动屏幕上堆叠在一起.
这个问题没有优雅的 Bootstrap-only 解决方案.您可以使用表格、CSS 网格或@Toan Lu 在评论中描述的选项.
引导网格选项
我建议简单地使用 col-sm-2 或 col-sm-3 作为标签(使它们适合大约最宽的标签)和 text-truncate 省略号(...) 溢出的文本，直到它们在移动设备上垂直堆叠...
<label class="col-form-label col-sm-2 text-truncate">标签<div class="col-sm-3 col-md-2"><选择>..</选择>
https://codeply.com/go/e3mDrmMv7k
<小时>
表格选项
使用此选项，标签上使用 width:1% 以便它们缩小到最宽的宽度.使用 text-nowrap 阻止标签换行.每个表单行是一个 d-table-row，每个标签是一个 d-table-cell...
.col-form-label.d-sm-table-cell {宽度: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">类型<div class="col-sm-3 col-md-2"><选择>..</选择>
<div class="form-row d-table-row"><label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">更长的标签在这里<div class="col-sm-3 col-md-2"><选择>..</选择>
https://codeply.com/go/e3mDrmMv7k(见第二个选项)
表格选项使 div 成为 tr/td，但也可以响应式工作，允许字段在移动设备上垂直堆叠.阅读更多关于 [d-table classes](是的，Bootstrap 4 的一部分:http://getbootstrap.com/docs/4.1/utilities/display/#notation).
CSS 网格选项
另一种(非 Bootstrap 4)方法是使用 CSS 网格.使行 display:grid 在 2 个 grid-template-columns 跨行使用 fr 大小.
.d-grid {显示:网格；网格模板列:0fr 1fr；}
https://codeply.com/go/9Z7Hg2tl1H
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.
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.
I tried adding col-auto but then the combos no longer horizontally aligned with each other.
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.
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>
解决方案
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.
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.
Bootstrap Grid option
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://codeply.com/go/e3mDrmMv7k
Table option
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://codeply.com/go/e3mDrmMv7k (see 2nd option)
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 Grid option
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://codeply.com/go/9Z7Hg2tl1H
这篇关于无法让 Bootstrap 4 Horizontal Form 按要求工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
