Jquery 如何使子菜单中的图像在引导导航中居中

朋友们，在以子菜单为中心排列图像时，我面临响应问题。我有一个1280px宽的容器，用于所有屏幕。正如你们在fiddle中看到的，我将类别作为菜单，当我们点击类别时，它会打开一个包含图像的菜单。我希望这些菜单集中在所有屏幕上，其边框应覆盖整个屏幕

简单地说，我们的分类应该从左侧徽标的正下方开始，所有图像应该始终集中在所有屏幕上。现在，带有图像的子菜单总是向左或向右移动。我希望子菜单中的图像始终采用容器宽度，并通过留下左右边距来适应所有桌面屏幕的容器，整个子菜单应该覆盖整个屏幕。请查看此代码以供参考。我正在添加一个屏幕截图，请参考，看看你能不能帮我，非常感谢你抽出时间

这张图片显示了我现在得到的东西 这就是我想要的，虽然右边的空间比较小。但我需要这样的东西，所有内容都应该适合容器的宽度，并在左右两侧留出相同的空间，背景黑色覆盖整个屏幕大小。我尝试使用左边距，但它仅适用于我设置的屏幕，请帮助我使此菜单响应。任何帮助建议都将不胜感激。 多谢各位

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

我在这里更新了你的小提琴。您的html标记看起来更混乱，但我只是根据您的要求对其进行了修改

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

}

---

我已经在这里更新了你的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;
    }

} 

---

我添加了这些类->

---

要覆盖您的，请从子菜单中删除pull right类。

我有一个1280px宽的容器，对于所有屏幕

没有多少/任何具有该宽度的手机-对于桌面，它看起来像是断开的，所以我将容器宽度设为1280px，这只是一个提示：在您的JSFIDLE中，您将CSS代码放入JavaScript字段而不是CSS字段哦，很抱歉，我会更新谢谢您检查这是否有助于您它不会与mnargin left一起工作，因为该边距仅适用于您的屏幕，我们需要为每个不同的屏幕自动捕获左边边距。如果您是对的，请执行以下操作。那么如何定义宽度始终为1280px？它应该是100%对吗？伙计，请检查最小宽度（1280）屏幕大小我有1280，这意味着我的容器内容将始终居中，在1280px。这意味着左边和右边的边距是自动的，因为从1280px开始的任何屏幕都将包含1280px中的所有内容，只有这些内容有助于保持响应。你能检查上面更新的fiddler链接吗？太好了！希望赏金在我的路上

.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;
    }

} 

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