css - Bootstrap 内联 block 无法正常工作

标签 css twitter-bootstrap bootstrap-4

查看此网站:http://pazomall.storehippo.com/

您可以看到顶部菜单,其中有 3 个选项(我的帐户、需要帮助和购物车)!如您所见,购物车并未与其他选项内联。

我尝试了 display: inline-block; 但它根本不起作用。请帮助我将这些菜单内联(使用 Chrome 开发者工具)。

最佳答案

您正在使用 col-md-3,这 3 个菜单将不适合 col-md-3 的 25% 宽度

选项1.您可以将搜索栏的col-md-5更改为col-md-4,并将菜单部分的col-md-3更改为col-md-4

选项 2。您可以将 Logo 的 col-md-4 更改为 col-md-3,然后将菜单部分的 col-md-3 更改为 col-md-4 - 如果您不想减少搜索栏长度

关于css - Bootstrap 内联 block 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50759845/

相关文章:

html - Bootstrap - 如何将列高设置为多行?

html - 如何为按钮创建叠加层

javascript - bootstrap 4 仅滚动中间列/facebook 像滚动

html - Owl Carousel 2 使用 Bootstrap 4 显示不正确的宽度

javascript - CSS/JS - 包装元素的水平对齐

jquery - 当通过 jQuery 应用类时,CSS 转换过渡在 Firefox 中不动画

html - 确保 div 适合 p 到一行

css - 等宽元素在 bootstrap 中不相等

css - 在框中以全宽显示 Woocommerce 变体下拉列表

php - Bootstrap DataTables - 分页不适用于动态网格系统