How to get rowspan on Navbar, bootstrap - html

Question

the code looks like this..
<div class="container"><!-- container-->
<div class="row">
<div class="col-md-3" rowspan="2"><!-- brand logo-->
<image src="images/logo.png" class="img-responsive"></image>
</div>
<div class="col-md-9">
<p class="pull-right">date&time</p>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default"><!-- navbar-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#kevalheader">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="kevalheader">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Service</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav><!-- end of navbar-->
</div>
</div>
</div>
logo should be responsible as well as navbar-header..whenever i m doing this scrollbar appears in the bottom..that can be solved by removing con tainer class which is in nav but at breaking point it wont work so needed help.. want to remove that also..looking forward to this.. thx a lot in adv.

Answer 1

Personally I would avoid the rowspan tag because I find it confusing to parse in my head, also I'm not entirely sure it is supported in the bootstrap grid system (I would appreciate a link to some documentation if anybody has some though).
I would focus on creating the columns and rows much more literally.
I would make the HTML look something like this:
<div class="container"><!-- container-->
<div class="row">
<div class="col-md-3"><!-- brand logo-->
<image src="images/logo.png" class="img-responsive"></image>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p class="pull-right">date&time</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default"><!-- navbar-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#kevalheader">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="kevalheader">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Service</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav><!-- end of navbar-->
</div>
</div>
</div>
</div>
</div>