Question

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

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

此图片显示了我现在所获得的内容problem_img 这就是我想要的exact_img这虽然在右边有一些空间。但我需要这样的东西，所有内容都应该适合容器宽度，左右相同的空间和覆盖整个屏幕尺寸的背景黑色。我尝试使用margin-left，但它只适合我设置的屏幕，请帮助我使这个菜单响应。任何帮助建议表示赞赏。 Updated 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%;
}

Answer 2

我已在此更新您的CSS请尝试此

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

}

.main-menu-div .col-sm-5, .main-menu-div .nav > li {  position: static; }
.main-menu-div .dropdown-menu { top:inherit; width:100%; }
.main-menu-div .top-category-div img { max-width:100px; }


@media (min-width: 1280px) {
    .container{  
        width: 1280px;
        padding-left: 0;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    }

}

Answer 3

我添加了这些类 - ＆gt;

https://jsfiddle.net/shekharb/p7qrv3av/17/

.label{display:block; width:100%}
.top-cat-div>li{display:block}

覆盖你的，并从子菜单中删除右拉类。

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

3 个答案: