Html 768px以下设备上的引导网格系统问题

我试图用bootstrap创建一个响应性强的网页，但问题是bootstrap的网格系统在

class=“col-x”

中无法正常工作，我已经给出了2个元素

col md xx

、

col lg xx

和

col sm xx

工作正常
这就是它现在的样子：

这就是我想要的：

**总结： 我想把那些蓝色和绿色的按钮放在图片前面。 图像位于左侧，按钮应位于右侧。 **

我的来源：

*{
文字装饰：无！重要；
}
.标题{
填充：16px 58px 21px 58px；
}
.logoDiv{
浮动：左；
}
.logodivimg{
浮动：左；
}
.TopBtns{
浮动：对；
}
.buybtn{
边缘底部：5px；
边缘顶部：10px；
宽度：300px；
}
.usersbtn{
宽度：300px；
}
.TopBtns{
浮动：对；
}
/*开始搜索栏*/
.searchForm{
边缘顶部：20px；
方向：ltr！重要；
文本对齐：居中；
}
.下拉菜单{
方向：ltr！重要；
}
.dropdown.dropdown-lg.下拉菜单{
页边顶部：-1px；
填充：6px 20px；
}
.input group btn.btn group{
显示：flex！重要；
}
.btn组.btn{
边界半径：0；
左边距：-1px；
}
.btn组.btn:最后一个子级{
边框右上角半径：4px；
边框右下半径：4px；
}
.btn group.form horizontal.btn[type=“submit”]{
边框左上半径：4px；
边框左下半径：4px；
}
.表格水平.表格组{
左边距：0；
右边距：0；
}
.窗体组.窗体控件：最后一个子项{
边框左上半径：4px；
边框左下半径：4px；
}
/*结束搜索栏*/
navbar先生{
背景色：#fdfd；
-moz盒阴影：02px8pxrgb（189189189189189）；
-webkit盒阴影：0 2px 8px rgb（189189189189）；
盒影：02px8pxRGB（189189189189189）；
边界半径：0！重要；
边框底部：0！重要；
左边框：0！重要；
右边界：0！重要；
}
@媒体屏幕和屏幕（最大宽度：1172px）{
#高级搜索{
宽度：400px；
}
}
@媒体屏幕和屏幕（最大宽度：992px）{
#高级搜索{
宽度：300px；
}
.标题{
填充：16px 32px 21px 32px；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
#高级搜索{
宽度：100%；
}
.searchForm{
宽度：100%；
浮动：无；
}
.TopBtns{
浮动：无；
}
.标题{
填充：16px 16px 21px 16px；
}
}

سلام سلام

下拉标题1


سلام سلام

下拉标题1


过滤
所有片段
作为特色的
最受欢迎
一流的
评论最多的
作者
包含单词

将图像和按钮组放在div上，然后使用flexbox。 将图像设置为浮动：左，将按钮组设置为浮动：右。

---

它应该有效；）

尝试将col-6和col-2类更改为col-xs-6。您还可以阅读更多有关引导网格如何工作的内容。此外，对于我们的按钮，避免使用固定宽度。把它拿走

更新：如果您想让btn块占据屏幕，请在按钮中添加

btn块

整列。另外，请将搜索栏分隔到另一行

*{
文字装饰：无！重要；
}
.标题{
填充：16px 58px 21px 58px；
}
.logoDiv{
浮动：左；
}
.logodivimg{
浮动：左；
}
.TopBtns{
浮动：对；
}
.buybtn{
边缘底部：5px；
边缘顶部：10px；
}
.TopBtns{
浮动：对；
}
/*开始搜索栏*/
.searchForm{
边缘顶部：20px；
方向：ltr！重要；
文本对齐：居中；
}
.下拉菜单{
方向：ltr！重要；
}
.dropdown.dropdown-lg.下拉菜单{
页边顶部：-1px；
填充：6px 20px；
}
.input group btn.btn group{
显示：flex！重要；
}
.btn组.btn{