4

Why does this simple bootstrap code cause a horizontal scroll?

 3 years ago
source link: https://www.codesd.com/item/why-does-this-simple-bootstrap-code-cause-a-horizontal-scroll.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Why does this simple bootstrap code cause a horizontal scroll?

advertisements

I'm a newbie to bootstrap, I'm trying to build a 3 column media object with it but my code cause scrolls horizontally:
this is my js fiddle link: http://jsfiddle.net/5ea98ytm/
and here is my code:

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

I'm just trying to create 3 column of media object with col-md-4 Where am I doing it wrong?

Remove all containers above media class object. Bcoz it takes the whole width of the page. In my pc width: 1170px;


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK