Twitter bootstrap 引导4-两个列不在移动设备上工作
我有一排按钮,在大屏幕和大屏幕上都很好看 我使用的是Bootstrap4,我希望这些按钮在移动设备上移动到两列 我添加了xs和sm列6,因此不确定问题出在哪里:Twitter bootstrap 引导4-两个列不在移动设备上工作,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我有一排按钮,在大屏幕和大屏幕上都很好看 我使用的是Bootstrap4,我希望这些按钮在移动设备上移动到两列 我添加了xs和sm列6,因此不确定问题出在哪里: <div class = "container-fluid"> <div class = "col-xs-6 col-sm-6 col-md-12 col-lg-12"> <button> Biz </button> <button> C
<div class = "container-fluid">
<div class = "col-xs-6 col-sm-6 col-md-12 col-lg-12">
<button> Biz </button>
<button> Charity </button>
<button> Health </button>
<button> Media </button>
<button> Politics </button>
<button> Tech </button>
</div>
</div>
生意
慈善事业
健康
媒体
政治
技术人员
在bs4中没有xs
,您还应该为列-*
使用此选项(此处col-lg-12
是多余的,因为col-md-12
样式将应用于所有更高的视口,除非您需要大视口和超大视口的不同布局)
第1列
第2列
生意
慈善事业
健康
媒体
政治
技术人员
如果要为xs
和sm
设置两列,则包含col-xs-6 col-sm-6
的另一个div
在哪里?您向我们显示了将占据前6个柱网轴线的div
,但缺少占据最后6个柱网轴线的div
。但是在阅读这个问题时,您似乎想将div
中的6个按钮分成两列,对吗?噢,谢谢您的帮助。
<div class="row">
<div class = "col-6 col-md-12 col-lg-12">Col 1</div>
<div class = "col-6 col-md-12 col-lg-12">Col 2</div>
</div>