Css 为什么这个简单的引导代码会导致水平滚动？_Css_Twitter Bootstrap

Css 为什么这个简单的引导代码会导致水平滚动？

css twitter-bootstrap

Css 为什么这个简单的引导代码会导致水平滚动？,css,twitter-bootstrap,Css,Twitter Bootstrap,我是bootstrap的新手，我试图用它构建一个3列媒体对象，但我的代码会水平滚动：这是我的js小提琴链接：这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Ex

我是bootstrap的新手，我试图用它构建一个3列媒体对象，但我的代码会水平滚动：
这是我的js小提琴链接：
这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example1</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<div class="container-fluid">
   <div class="row">
        <div class="col-md-4">
            <div class="container">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="http://placehold.it/140x140" alt="...">
                        </a>
                    </div>
                    <! MEDIA LEFT -->
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4> some texts
                    </div>
                    <! MEDIA BODY -->
                </div>
                <! MEDIA  -->

            </div>
            <! CONTAINER -->
        </div>
        <! COL-MD-4 -->
        <div class="col-md-4">
            <div class="container">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="http://placehold.it/140x140" alt="...">
                        </a>
                    </div>
                    <! MEDIA LEFT -->
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4> some texts
                    </div>
                    <! MEDIA BODY -->
                </div>
                <! MEDIA  -->

            </div>
            <! CONTAINER -->
        </div>
        <! COL-MD-4 -->
        <div class="col-md-4">
            <div class="container">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="http://placehold.it/140x140" alt="...">
                        </a>
                    </div>
                    <! MEDIA LEFT -->
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4> some texts
                    </div>
                    <! MEDIA BODY -->
                </div>
                <! MEDIA  -->

            </div>
            <! CONTAINER -->
        </div>
        <! COL-MD-4 -->
    </div>
  </div>
<! ROW -->
</div>
  <! C-F -->
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>


引导示例1
媒体标题部分文本
媒体标题部分文本
媒体标题部分文本

我只是想用col-md-4创建3列媒体对象，我哪里做错了？


媒体标题部分文本
媒体标题部分文本
媒体标题部分文本


媒体标题部分文本
媒体标题部分文本
媒体标题部分文本

删除媒体类对象上方的所有容器。它占据了整个页面的宽度。在我的电脑中宽度：1170px

如果您的问题出现在更大的屏幕上，它将显示水平滚动，然后使用overflow-x:hidden in body标记。这样看：

<body style="overflow-x:hidden;">

/// all code stuffs


</body>


///所有代码资料

如果您的问题出现在较大的屏幕上，则显示水平滚动，然后使用overflow-x:hidden in body标记。这样看：

<body style="overflow-x:hidden;">

/// all code stuffs


</body>


///所有代码资料

问题在于屏幕分辨率。col-md-4适用于笔记本电脑和台式机，不适用于您必须提供的较小设备。col sm-*（代替*您必须提供的尺寸）

替换为

       <div class="col-md-4 col-sm-4">
       <div class="col-md-4 col-sm-4">
       <div class="col-md-4 col-sm-4">

问题在于屏幕分辨率。col-md-4适用于笔记本电脑和台式机，不适用于您必须提供的较小设备。col sm-*（代替*您必须提供的尺寸）

替换为

       <div class="col-md-4 col-sm-4">
       <div class="col-md-4 col-sm-4">
       <div class="col-md-4 col-sm-4">

我几乎找不到你提到的小提琴在滚动。清楚你所发布的内容。没有完全理解你需要什么！在小型设备上没有问题（即在小提琴上显示），但是如果你的设备宽度大于990px，你会看到水平滚动。在你提到的小提琴上，我几乎找不到滚动。清楚你所发布的内容。没有完全理解你需要什么！小型设备没有问题（即defualt show on fiddle），但是如果您的设备宽度大于990px，您会看到水平滚动。谢谢，但为什么容器类会导致此问题？@JordanBos，因为容器会采用视口的宽度，即设备屏幕的宽度。谢谢，但是为什么容器类会导致这个问题呢？@JordanBos作为容器使用了视口的宽度，即设备屏幕的宽度。您可以在小尺寸中正确地获得它，因为它使用col-xs-12和col-md-12。所以它需要行的全宽，在小尺寸中可以正确地得到它，因为它需要col-xs-12和col-md-12。所以它占据了整行的宽度。