如何保持子菜单的图像以 bootstrap nav-pill 为中心答案

【问题标题】：how to keep submenu with images centered in bootstrap nav-pill如何保持子菜单的图像以 bootstrap nav-pill 为中心
【发布时间】：2016-03-02 04:31:34
【问题描述】：

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

简单来说，我们的类别应该正好在左侧徽标的下方开始，并且所有图像都应该始终在所有屏幕上居中。现在带有图像的子菜单总是向左或向右移动我希望子菜单中的图像始终采用容器宽度并通过留下左右边距来适合所有桌面屏幕的容器，并且整个子菜单应该覆盖整个屏幕请看一下这段代码demo 供参考我正在添加屏幕截图，请参考，看看您是否可以帮助我，非常感谢您抽出宝贵的时间。

这张图片显示了我现在得到的problem_img 这就是我想要的exact_img 虽然右边的空间更少。但我需要这样的东西，所有内容都应该适合容器宽度，并在左右两侧留下相同的空间，背景黑色覆盖整个屏幕尺寸。我尝试使用 margin-left 但它仅适用于我设置的屏幕，请帮助我使此菜单具有响应性。任何帮助建议表示赞赏。 Updated JSFiddle 谢谢你。

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

【问题讨论】：

I have a container of width 1280px, for all screens 没有多少/任何具有这种宽度的手机 - 它看起来会坏掉
我想要桌面，所以我给容器宽度为 1280px
请注意：在您的 jsfiddle 中，您将 CSS 代码放入 JavaScript 字段而不是 CSS 字段
抱歉，我会更新谢谢
检查这是否对您有帮助 jsfiddle.net/p7qrv3av/2

标签： jquery html css twitter-bootstrap

【解决方案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%;
}

【讨论】：

它不适用于 mnargin-left，因为该边距仅适合您的屏幕，我们需要为每个不同的屏幕自动捕获 margin-left
你是对的。那么你如何总是将宽度定义为 1280px 呢？应该是 100% 对吧？
老兄，请检查最小宽度（1280）屏幕尺寸我有 1280，这意味着我的容器内容将始终居中并以 1280 像素为单位。这意味着左边距和右边距是自动的，因为任何从 1280 像素开始的屏幕都会包含 1280 像素内的所有内容，这有助于保持响应能力。
你能检查一下上面更新的提琴手链接吗？
太棒了！希望赏金能如期而至

【解决方案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;
    }

}

【讨论】：

【解决方案3】：

我添加了这些类 ->

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

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

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

【讨论】：