如何防止 bootstrap 和列表中的水平滚动？

Question

我有一个响应式的 UL 列表，很多 Li ImageItem 和 span 都在这个 UI 中。在最大化尺寸时，3 个项目显示在一行中，当我调整（小）我的浏览器时，2 个项目显示并且工作正常。但是在我的浏览器的最小尺寸中出现水平滚动 :( 1 项显示但滚动出现，我如何防止水平滚动？！这是我的 css :

.myUl {
    font-size:large !important;
    color:#373636 !important;
    text-align:center !important;
}
.myUl li {
    width:350px !important;
}
.myUl li:hover {
    background:rgba(0, 0, 0, 0.2) !important;
}
.myUl li img {
    height:170px !important;
    width:100px !important;
}
.myUl li span {
    float:right !important;
    width:170px;
    padding-right:8px !important;
    padding-top:10px !important;
    text-align:right !important;
    vertical-align:middle !important;
    line-height: 1.5em !important;
}
ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul.img-list li {
    display: inline-block;
    height: 180px;
    margin: 0 1em 1em 0;
    position: relative;
    width: 150px;
}
ul.img-list li:hover span.text-content {
    opacity: 1;
}

这是我的Index.cshtml

<div>
    <ul class="img-list myUl">
        <li>
            <span>
                some text here
            </span>
            <span style="float: left !important; padding-top: 3px !important;">
                <a>
                    <img class="img-responsive img-circle img-thumbnail" src="~/Images/MenuImages/z.jpg"  />
                </a>
            </span>
        </li>
        <li>
           .........
        </li>
  </ul>

我页面的图片

Answer 1

当屏幕宽度小于 360px 时，您的以下代码可能会导致水平滚动，

.myUl li {
  width:350px !important;
}

当浏览器尺寸低于 350px 时，您的浏览器将显示水平滚动条。如果您需要解决此问题，您需要为此编写一个媒体查询，如下所示：

@media only screen and (max-width: 360px) {
  .myUl li {
      width:100% !important;
  }
}

你也可以使用属性 body { overflow-x: hidden; }

Answer 2

要防止水平滚动，只需将其添加到 Css 中的 body 标签中，如下所示：

body {
    overflow-x: hidden;
}

希望对您有所帮助

如何防止 bootstrap 和列表中的水平滚动？

how prevent horizontal scroll in bootstrap and list?

html

css

horizontal-scrolling

twitter-bootstrap