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

Question

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

具体来说，Boostrap示例耗尽了我不想要的整个100％宽度，我不希望组合更宽，然后必要，我不希望标签和组合之间有很大的差距。

我尝试添加 col-auto 但是这些组合不再相互水平对齐。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

Bootstrap网格选项

我建议只使用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停止包装标签。每个表单行都是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网格选项

另一种（非Bootstrap 4）方法正在使用CSS网格。排成行display:grid使用行{2} fr上的grid-template-columns大小调整。

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

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

Answer 2

如果您使用早期版本的bootstrap css：

，则按预期工作

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">