如何使用bootstrap nav-pill中心的图像保持子菜单

Question

朋友们,我在面向子菜单中排列图像时遇到了响应问题.我有一个宽度为1280px的容器,适用于所有屏幕.正如您在小提琴中看到的那样,我将类别作为菜单,然后当我们点击类别时,它会打开带有图像的菜单.我希望这些菜单在所有屏幕上居中,其边框应覆盖整个屏幕.

简单来说,我们的类别应该从左侧徽标的正下方开始,所有图像应始终以所有屏幕为中心.现在带图像的子菜单总是向左或向右移动我希望子菜单中的图像始终占用容器宽度,并通过左右边距适合所有桌面屏幕的容器,整个子菜单应覆盖整个屏幕请查看此代码演示供参考我正在添加截图请参考,看看你是否可以帮助我,非常感谢你给我的时间.

这个图像显示了我现在得到的问题problem_img 这就是我想要的exact_img这是虽然右边有一些空间.但我需要这样的东西,所有内容都应该适合容器宽度,左右相同的空间和覆盖整个屏幕尺寸的背景黑色.我尝试使用margin-left,但它只适合我设置的屏幕,请帮助我使这个菜单响应.任何帮助建议表示赞赏.更新了JSFiddle 谢谢.

 [1]: https://jsfiddle.net/p7qrv3av/

Answer 1

https://jsfiddle.net/vinothsdev/p7qrv3av/5/

我在这里更新了你的小提琴.您的html标签看起来更加混乱,但我只是修改它以满足您的要求.

.top-category-div{
background: black;
  color: white;
        padding-bottom: 54px;

}

.container-menu{               
    margin-right: auto;
margin-left: auto;   
}
.category-dropdown-menu{
 margin-left: -300px;
width: 1280px;
}
img{
  width:100%;
}