Bootstrap Col-MD-6在平板电脑模式下观看时不起作用
我试图以平板电脑的大小并排获得2列，所以我写了Col-Md-6，以便每列只使用6个单元，但是一旦我从台式机大小转移到平板电脑尺寸时，列就垂直堆叠了每列使用所有12个单元。实际上，在移动模式下查看时也存在相同的问题，而Col-SM-4也垂直堆叠。请帮忙。
<div class="row">
<div class="col" style="background-color:red;border:1px solid">
col
</div>
<div class="col" style="background-color:red;border:1px solid">
col
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
</div>
I was trying to get 2 columns side by side in tablet size while so I wrote col-md-6 so that each column will use only 6 units,but as soon as I shift from desktop size to tablet size the columns get stacked vertically with each column using all 12 units.In fact there is the same issue while viewing in mobile mode and col-sm-4 also stacks columns vertically. Please help.
<div class="row">
<div class="col" style="background-color:red;border:1px solid">
col
</div>
<div class="col" style="background-color:red;border:1px solid">
col
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的问题也是您的答案，因为Bootstrap的断点旨在根据设备视图堆叠列。尝试使用
col-sm-6而不是col-md-6。Your problem is also your answer in the sense that Bootstrap's breakpoints are designed to stack columns based on the device view. Try to use
col-sm-6instead ofcol-md-6.