Question

我是bootstrap的新手，我正在尝试使用它构建一个3列媒体对象，但我的代码会导致水平滚动：
这是我的js小提琴链接：http://jsfiddle.net/5ea98ytm/
这是我的代码：

<!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>

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

Answer 1

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

Answer 2

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           </head><body>
           <div class="container-fluid">
   <div class="row">
        <div class="col-md-4">
            
                <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  -->

          
            <!-- CONTAINER -->
        </div>
        <!-- COL-MD-4 -->
        <div class="col-md-4">
         
                <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  -->

           
            <!-- CONTAINER -->
        </div>
        <!-- COL-MD-4 -->
        <div class="col-md-4">
        
                <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  -->

        
            <!-- CONTAINER -->
        </div>
        <!-- COL-MD-4 -->
    </div>
  </div>
<!-- ROW -->
</div>
           </body>
           </html>

＆＃13;

从所有媒体对象中删除<div class="container>。这引起了问题。

Answer 3

如果你的问题在大屏幕上，它显示水平滚动，然后在body标签中使用overflow-x：hidden。看起来像这样：

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

/// all code stuffs


</body>

Answer 4

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

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

用

替换它

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

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

4 个答案: