菜单（图片）不填满我的 Joomla 网站的宽度

Question

我已经设置了我的图片菜单，它工作正常，但我注意到它没有填满网站的宽度。

我已经将所有图片设置为max-width: 100%;和高度：自动；在实际组件中，但它不想填充网站的宽度。

我的 Protostar 模板已经设置为 Fluid。

我希望图片菜单能够响应我网站的宽度，当屏幕尺寸缩小时我也希望如此。

目前情况并非如此。

如有任何帮助，我们将不胜感激。

这是 link 我的网站：

.image-title {
display: flex;
font-size: 30px;
color: white;
justify-content: center;
position: relative;
top: -70px;
line-height: normal;
}
.item-241 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.item-242 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.item-244 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.nav > li > a > img {
max-width: 100%;
height: auto;
}

Answer 1

如果你做对了一切，你会得到想要的结果。对解决方案使用以下 css 规则：

.nav:ntd-child(2) {
    display: flex;
    justify-content: space-between;
}

在此规则中，删除我指向的这些行。

.nav-tabs:before,
.nav-tabs:after,
.nav-pills:before, <--- delete
.nav-pills:after <--- delete {
    display: table;
    content: "";
    line-height: 0;
}

这里我把max-width换成了width

.nav > li > a > img {
    width: 100%; 
    height: auto;
}

.item-241, .item-242, .item-244   {
    width: 33%; /*add this it*/
    vertical-align: bottom;
    padding: 0px;
    display: table-cell;
}

.nav-pills > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 90%; /*add this it*/
}

提醒大家，所有图片的原生尺寸都是不一样的，就是说如果你给每个人都设置一个高度（固定），就不好看了。为了好看，图片需要勾过background-image，在div.

菜单（图片）不填满我的 Joomla 网站的宽度

Menu (Picture) does not fill width of my Joomla site

html

css

joomla