css 如何在Bootstrap中删除此水平滚动条

zsbz8rwp  于 2023-07-01  发布在  Bootstrap
关注(0)|答案(8)|浏览(180)

我的引导页面上有个恼人的水平滚动条。不知道是什么让它表现得像这样，或者该怎么办？
JsFiddle链接：http://jsfiddle.net/FatAlbert/cd1syrd9/2/

HTML：

  1. <body>
  2.     <div class="wrapper">
  3.         <div class="row">
  4.             <div class="header">
  5.                 <div class="container">
  6.                     <!-- navigation-->
  7.                         <nav class="navbar navbar-default">
  8.                             <div class="container-fluid">
  10.                                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
  11.                                 <a class="navbar-brand" href="#"><img src="xxx" /></a>
  13.                                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  14.                                     <ul class="nav navbar-nav">
  15.                                         <li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li>
  16.                                         <li><a href="#">Link</a></li>
  17.                                         <li><a href="#">Link</a></li>
  18.                                         <li><a href="#">Link</a></li>
  19.                                         <li><a href="#">Link</a></li>
  20.                                     </ul>
  21.                                 </div>
  22.                             </div>
  23.                         </nav><!-- / navigation-->
  24.                 </div>
  25.             </div><!-- / header-->
  26.         </div><!-- / container-->
  27.         <div class="row">
  28.             <div class="first-page-content">
  29.                 <div class="container">
  30.                         <img class="img-responsive img-big" src="xx"  />
  31.                         <p>
  32.                             Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam. 
  33.                         </p>
  35.                 </div>
  36.             </div>
  37.         </div><!--/first-content-->
  38.     </div>
  39.     <div class="footer">
  40.         <div class="container">
  41.             <p class="pull-right">
  42.                 Some<br />
  43.                 Info<br />
  44.             </p>
  45.         </div>
  47.     </div><!-- /footer-->
  49. </body>

CSS：

  1. html {
  2.     position: relative;
  3.     min-height: 100%;
  4. }
  6. body {
  7.     margin-bottom: 160px;
  8. }
  10. h1 {
  11.     font-size: 2.5em;
  12. }
  14. h2 {
  15.     font-size: 1.5em;
  16. }
  18. p {
  19.     font-family: Verdana,Arial,sans-serif;
  20.     font-size: 1.05em;
  21.     line-height: 1.8;
  22.     text-align: justify;
  23. }
  25. a {
  26.     color: #0071BB;
  27.     font-weight: bold;
  28. }
  30. .wrapper {
  31. }
  33. .footer {
  34.     position: absolute;
  35.     padding-top: 25px;
  36.     bottom: 0;
  37.     width: 100%;
  38.       /* Set the fixed height of the footer here */
  39.     height: 160px;
  40.     background-color: #5FC8FF;
  41. }
  43. .header .glyphicon-wrench {
  44.     margin: 0 3px;
  45. }
  47. .header h4 {
  48.     margin-right: 3px;
  49. }
  51. .img-responsive {
  52.     display: block;
  53.     margin: auto;
  54. }
  56. .img-responsive.img-big {
  57.     margin-top: 75px;
  58. }
  60. .navbar {
  61.     border: none;
  62. }
  64. .navbar .navbar-nav {
  65.     display: inline-block;
  66.     float: none;
  67.     vertical-align: top;
  68. }
  70. .navbar .navbar-collapse {
  71.     text-align: center;
  72. }
  74. .navbar-default .navbar-nav > li {
  75.     width: 150px;
  76.     margin-right: 2px;
  77. }
  79. .navbar-default .navbar-nav > li > a,
  80.     .navbar-default .navbar-nav > li > a:hover {
  81.     color: #fff;
  82.     font-weight: bold;
  83.     background-color: #92C7E1;
  84. }
  86. .navbar-default .navbar-nav > li > a:hover {
  87.     background-color: #98CEE5;
  88. }
  90. .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  91.     color: #fff;
  92.     background-color: #98CEE5;
  93. }
  95. a.navbar-brand {
  96.     padding: 5px;
  97. }
  99. .row {
  100. }
  102. .alert {
  103. }
  105. .well {
  106. }
  108. .footer p {
  109.     font-weight: bold;
  110.     color: #FDFDFB;
  111. }
  113. @media (min-width: 992px) {
  114. }
  116. @media (min-width: 768px) {
  118.     .first-page-content p {
  119.         margin: 75px auto 25px auto;
  120.         width: 524px;
  121.     }
  122. }
css

8条答案

按热度按时间
r6l8ljro

r6l8ljro1#

根据Bootstrap 3文档：
行必须放置在.container（固定宽度）或.container-fluid（全宽度）中，以进行正确的对齐和填充。
因此，将类container添加到.wrapper元素中。
Updated Example

  1. <div class="wrapper container">
  2.     <div class="row">
  3.         ...
  4.     </div>
  5. </div>

作为一个解释，.row类的每一侧都有-15px的边距。

  1. .row {
  2.     margin-right: -15px;
  3.     margin-left: -15px;
  4. }

.container类有效地取代了以下内容：

  1. .container {
  2.     padding-right: 15px;
  3.     padding-left: 15px;
  4.     margin-right: auto;
  5.     margin-left: auto;
  6. }

除了阅读Bootstrap 3 docs，我建议阅读文章“The Subtle Magic Behind Why the Bootstrap 3 Grid Works”。

展开查看全部
赞(0）分享  回复(0）举报  2023-07-01
l0oc07j2

l0oc07j22#

只要将此代码复制到您的CSS，它将禁用您的水平滚动条。

  1. body {overflow-x: hidden;}
赞(0）分享  回复(0）举报  2023-07-01
k5ifujac

k5ifujac3#

写作：

  1. html, body {
  2.   max-width: 100%;
  3.   overflow-x: hidden;
  4. }

是解决这个问题的一种方法

赞(0）分享  回复(0）举报  2023-07-01
q3aa0525

q3aa05254#

复制并粘贴到CSS代码中

  1. html, body {
  2.      overflow-x: hidden;
  3.    }
赞(0）分享  回复(0）举报  2023-07-01
omvjsjqw

omvjsjqw5#

设置溢出-x：hidden;可以使用，但会影响滚动事件。在容器中放置行对我来说很有用。

赞(0）分享  回复(0）举报  2023-07-01
8ulbf1ek

8ulbf1ek6#

这个问题主要是由于父容器丢失引起的。解决方案是，您可以向行添加.no-container类并添加margin：0以补偿行类的负裕量。
请参阅下面的CSS和HTML标记代码：

  1. .no-container {
  2.     margin-left: 0 !important;
  3.     margin-right: 0 !important; 
  4. }
  5. .row {
  6.     border: 1px solid #999;
  7. }
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  2. <!--<div class="container"> Container is commented -->
  3. <div class="row no-container">
  4.     <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
  5.     <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
  6. </div>
  7. <!--</div> Container ends here -->
展开查看全部
赞(0）分享  回复(0）举报  2023-07-01
qnyhuwrf

qnyhuwrf7#

在我的例子中，我有一个container-fluid class div标签在另一个container-fluid class div标签中。删除其中一个解决了问题。

赞(0）分享  回复(0）举报  2023-07-01
velaa5lx

velaa5lx8#

试试这个！对我很有效。

  1. .col-12{
  2.     padding-right: 0!important;
  3.     padding-left: 0!important;
  4. }
  6. .row{
  7.     margin-right: 0px;
  8.     margin-left: 0px; 
  9. }
赞(0）分享  回复(0）举报  2023-07-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com