引导列无法进行宽度调整
我想显示两个彼此相邻的输入区域，一个占用空间比另一个少。这就是我现在拥有的，但是不知何故它行不通。
<div class="row">
<div class="input-group input-group-sm mb-3 fitContent col-xs-8">
<span class="input-group-text">Reihentitel</span>
<input type="text" class="form-control" id="inputReihentitel" input>
</div>
<div class="input-group input-group-sm mb-3 fitContent col-xs-4">
<span class="input-group-text">Bandaufführung</span>
<input type="text" class="form-control" id="inputBandaufführung" input>
</div>
</div>
当我只使用.col类时，它将两个DIV标签均匀分配在屏幕上。例如，.col-xs-8和.col-xs-4在另一个下方显示一个。
现在，我将输入组放入具有.col类的另一个DIV中，但与以前相同。
<div class="row">
<div class="col-xs-8">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Reihentitel</span>
<input type="text" class="form-control" id="inputReihentitel" input>
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Bandaufführung</span>
<input type="text" class="form-control" id="inputBandaufführung" input>
</div>
</div>
</div>
I want to display two input areas next to each other with one taking less space than the other. This is what I have now but somehow it won't work.
<div class="row">
<div class="input-group input-group-sm mb-3 fitContent col-xs-8">
<span class="input-group-text">Reihentitel</span>
<input type="text" class="form-control" id="inputReihentitel" input>
</div>
<div class="input-group input-group-sm mb-3 fitContent col-xs-4">
<span class="input-group-text">Bandaufführung</span>
<input type="text" class="form-control" id="inputBandaufführung" input>
</div>
</div>
When I just use the .col class it splits the two div tags evenly across the screen. With for example the .col-xs-8 and .col-xs-4 it is displayed one below the other.
Now I put the input-group into an other div which has the .col class but it is the same as before.
<div class="row">
<div class="col-xs-8">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Reihentitel</span>
<input type="text" class="form-control" id="inputReihentitel" input>
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Bandaufführung</span>
<input type="text" class="form-control" id="inputBandaufführung" input>
</div>
</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当您阅读文档您会看到最小的列don don不再需要任何前缀。这是因为这是默认宽度，您不需要任何前缀来默认。
换句话说：
col-xs-4仅变成col-4（因为它在所有尺寸上是4个宽度，而不仅是xs）我的建议是我强烈推荐将柱类与其他课程混合。仅仅覆盖列样式并进行布局休息，这太容易了。
When you read the documentation you will see that the smallest columns don't need any prefixes anymore. This is because this is the default width and you don't need any prefixes for a default.
In other words:
col-xs-4becomes justcol-4(since it is 4-width on all sizes, not only xs)My advice from the comments to not mix column-classes with other classes is still something I highly recommend. It is too easy to just overwrite column styling and have the layout break if you do it otherwise.