无法使Bootstrap 4 Horizo​​ntal Form按要求工作

Question

如何在手机,平板电脑和计算机上制作一个看起来正确的简单Bootstrap Horizo​​ntal Form.即我希望组合如示例中所示对齐,但我不希望组合大于必要,我只想要标签和组合之间的小间隙.然后当屏幕尺寸太小而不适合标签和组合时,我希望它们堆叠.

特别是Boostrap示例耗尽了我不想要的整个100%宽度,我不希望组合更宽,然后必要,我不希望标签和组合之间有很大的差距.

我尝试添加col-auto,但随后组合不再相互水平对齐.

我现在尝试为https://getbootstrap.com/docs/4.1/components/forms/#column-sizing中描述的标签和组合添加col- [1-12]值但是当它转到小时它没有正确堆叠电话.

然后我尝试使用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不像Table那样在行/列中工作.您可以使用col-sm-auto每个标签缩小到适合,但标签/输入将不会垂直向下对齐页面...

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

这个问题没有优雅的Bootstrap解决方案.您可以在注释中使用表,CSS网格或@Toan Lu描述的选项.

Bootstrap Grid选项

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

<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从包装阻止标签.每个表格行是a 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://www.codeply.com/go/e3mDrmMv7k(参见第二个选项)

table选项使div成为tr/td,但也响应地允许字段在移动设备上垂直堆叠.阅读[d-table classes]的更多信息(是的,Bootstrap 4的一部分:http://getbootstrap.com/docs/4.1/utilities/display/#notation).

CSS Grid选项

另一个(非Bootstrap 4)方法使用CSS网格.制作行display:grid使用fr整行上2 的大小调整grid-template-columns.

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

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