css - 无法让 Bootstrap 4 Horizo​​ntal Form 按要求工作

Question

我如何制作一个简单的 Bootstrap Horizontal Form在手机、平板电脑和电脑上看起来是正确的。也就是说，我希望组合如示例所示对齐，但我不希望组合比必要的大，我只希望标签和组合之间有一个小间隙。然后，当屏幕尺寸太小无法放入标签和组合时，我希望将它们堆叠起来。

特别是 Boostrap 示例用完了整个 100% 的宽度，我不希望这样，我不希望组合比必要的更宽，我也不希望标签和组合之间有很大的差距。

我尝试添加 col-auto 但组合不再水平对齐。

我现在已经尝试为标签和组合添加 col-[1-12] 值，如 https://getbootstrap.com/docs/4.1/components/forms/#column-sizing 中所述但是当转到小型手机时它没有正确堆叠。

然后我尝试使用 col-md 所以总数小于 12 但它在主屏幕上看起来不正确因为现在标签和组合占用相同的空间所以它们各占屏幕的一半并且彼此相距不远.

 <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>

Answer 1

问题是 Flexbox 不像表格那样在行/列中工作。您可以使用 col-sm-auto 使每个标签收缩以适合，但标签/输入不会垂直向下对齐页面...

听起来您想缩小标签列以适应最宽标签的宽度。这可以通过将所有标签放在 1 列中并将输入放在另一列中来完成，但是每个标签/输入不会在移动屏幕上堆叠在一起。

这个问题没有优雅的纯 Bootstrap 解决方案。您可以使用表格、CSS 网格或@Toan Lu 在评论中描述的选项。

Bootstrap 网格选项

我建议简单地使用 col-sm-2 或 col-sm-3 作为标签(使它们适合大约最宽的标签)和 text-truncate 到 ellipsis(...) 溢出的文本，直到它们在移动设备上垂直堆叠...

<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

---

表格选项

使用此选项，width:1% 用于标签，以便它们缩小到最宽的宽度。使用 text-nowrap 停止标签换行。每个表单行都是一个d-table-row，每个标签都是一个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 (见第二个选项)

表格选项使 div 变成 tr/td，但也可以响应地工作，允许字段在移动设备上垂直堆叠。阅读更多关于 [d 表类](是的，Bootstrap 4 的一部分:http://getbootstrap.com/docs/4.1/utilities/display/#notation)。

---

CSS 网格选项

另一种(非 Bootstrap 4)方法是使用 CSS 网格。使行 display:grid 在行的 2 个 grid-template-columns 上使用 fr 大小。

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://codeply.com/go/9Z7Hg2tl1H