i trying have buttons beside each other @ display sizes.however when make window smaller, overlap each other shown in jsfiddle.
i have tried using col-xs-offset , col-xs-push affects col-md , col-lg settings reason, have checked bootstrap , html there doesn't appear issues there.
how can fix this?
jsfiddle: https://jsfiddle.net/whywymam/2u79tpp2/1/
html:
<div class="container"> <div class="row upperrow"> <nav class="nav logofw"> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4"> <a href="../mainpage/home.php" class="brand navbar-brand "> <img src="../image/logo.jpg" class="img-responsive" alt="logo"></a> </div> </nav> <ul class="nav navbar-nav navbar-right"> <li> <div class="col-xs-3 col-sm-4 col-md-4 col-lg-4"> <a href="../jobseeker/signuplogin.php" class="btn btn-danger" role="button"> <i class="glyphicon glyphicon-user"></i>job seeker </a> </div> </li> <li> <div class="col-xs-3 col-md-4 col-lg-4"> <a href="../employer/signuploginemp.php" class="btn btn-danger" role="button"> <i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>employer </a> </div> </li> </ul> </div> <div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div> <div class="row bottomrow"> <div class="col-sm-12 col-md-12 col-lg-12"> <nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor"> <div class="navbar-header "> <!--button appear when display on mobile device--> <button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle"> <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="nav-collapse" class="collapse navbar-collapse topmenu"> <ul class="nav navbar-nav center-block"> <li><a href="../mainpage/home.php">home</a></li> <li><a href="../mainpage/about.php">about</a></li> <li><a href="#">job</a></li> <li><a href="../mainpage/resources.php">resources</a></li> </ul> </div> </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor --> </div> </div> <!-- end middle row --> <!--to indicate page user on --> </div><!-- end container -->
you may want remove unordered list containing buttons , instead use button group:
http://getbootstrap.com/components/#btn-groups
also, since button groups make buttons flush each other, use css override margins.
js fiddle:
https://jsfiddle.net/1dwq7bqx/
css
.btn-group button { margin: 0 7px; } html
<div class="container"> <div class="row"> <div class="col-md-4 text-left"> <img src="logo.jpg" class="img-responsive" alt="logo" /> </div> <div class="col-md-8 text-right"> <div class="btn-group" role="group"> <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> job seekers</button> <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> employers</button> </div> </div> </div> </div> 
Comments
Post a Comment