i'm starting use bootstrap. building own page scratch it.
the problem have div overflowing bootstrap container.
i don't know if designing in terms of how many columns should using or using column instead of div in cases, don't understand fine line yet between adding plain html inside columns , if need nested bootstrap columns, or if i'm going way overboard or not columns , rows or if dno't have enough...trying understand that. because put ton in 1 column 1 wanna that, not , i'm trying understand why or why not.
so not responsive.
anyway here code, , image showing overflow.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>a title</title> <link href="../../../content/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="../../../content/bootstrap/css/sticky-footer.css" rel="stylesheet"> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="../../../content/bootstrap/js/html5shiv.min.js"></script> <script src="../../../content/bootstrap/js/respond.min.js"></script> <![endif]--> <style> body { margin: 0; padding: 0; } .nopadding { padding: 0 !important; } .padding-top-bottom-5 { /* when use important in bootstrap? */ padding-top: 5px !important; padding-bottom: 5px !important; } .padding-left-5 { padding-left: 5px !important; } .float-left{float: left;} .margin-5 { margin: 5px;} .margin-right-10 {margin-right: 10px;} .margin-2 { margin: 2px !important; } .margin-left-5 { margin: 2px !important; } p { font-size: 1em; line-height: 1.25em; text-align: justify; word-wrap: break-word; } .italic { font-style: italic; } .font-xsmall { font-size: 13px; } .bold { font-weight: bold; } #castmetalist li { display: inline; list-style-type: none; padding-right: 10px; } .vtop { vertical-align: top; float: left; } .inline-block { display: inline-block; } .show-details { float: right; } .cast-description { margin: 10px 0px 0px 0px; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"><img src="../../../images/fulllogo_nobackground.png" /> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">dashboard</a></li> <li><a href="#">settings</a></li> <li><a href="#">profile</a></li> <li><a href="#">help</a></li> </ul> </div> </div> </nav> <div class="row"> <div class="col-sm-12 well"> <div id="navbar2" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li> <li><a href="#">donate!</a></li> <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li> <li><a href="#">profile</a></li> <li><a href="#">help</a></li> </ul> </div> </div> </div> <div class="container-fluid well"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar well"> getting around <ul class="nav nav-sidebar well"> <li class=" "><a href="#">authors <span class="sr-only">(current)</span></a></li> <li><a href="#">recent shows</a></li> <li><a href="#">popular shiows</a></li> <li><a href="#">about</a></li> </ul> </div> <div class="col-lg-9 well"> <div class="row"> <div class="col-sm-4 col-md-9 col-lg-12 margin-2 padding-top-bottom-5"> <div class="row"> <div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 padding-top-bottom-5"> <img src="../../../images/castthumbs/episode206.jpg" class="vtop margin-right-10" /> <div class="show-details"> <span class="bold">the title</span> <p class="cast-description"> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem @ nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. curabitur sodales ligula in libero. sed dignissim lacinia nunc. curabitur tortor. </p> </div> </div> <div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 padding-top-bottom-5"> <p> <ul class="list-unstyled" id="castmetalist"> <li>2/17/2015</li> <li>author: dude</li> </ul> </p> </div> <div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 padding-top-bottom-5"> more details episode </div> <div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 padding-top-bottom-5"> watch episode </div> <div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 padding-top-bottom-5"> <img src="../../../content/bootstrap/fake_ad.jpg" width="468" height="60" /> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <h1>footer</h1> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
in opinion, going bit overboard columns. couldn't reproduce particular issue on firefox did see other layout issues. issues caused heavy mixing of different column sizes. in each row should aim make sure col-* combinations add 12 @ each size. had huge numbers of different values each of size levels, when have made simpler defining sizes needed.
i have created bootply simplifies code quite bit. instead of defining sizes every single size breakpoint use col-sm size. means use size define until hits 'small' size, @ point break full width. you'll find simpler start kind of simple approach , overlay more column sizes , when need them.
http://www.bootply.com/c8vpkbzhii#
this no means finished article. i've messed around title section , turned bootstrap media object, didn't go responsive, can challenge fix!
i hope helps in right direction, , if can tell browser having trouble overflowing text in , whether still occurs code helpful.
Comments
Post a Comment