CODEWITHSUNDEEP
csstwitter-bootstrap
chelder
chelder

Reputation: 3987

How to join two rows in the first column with Twitter Bootstrap (or simulate that effect)

I am trying to design a navbar like:

wanted navbar

If it were a table, it would be like:

wanted navbar with rows

But all my attempts so far failed. Maybe, my best attempt was:

<div class="pull-right">
<g:img dir="images" file="logo2.gif"/>
</div>

<div class="row-fluid">
<div class="logo pull-left">
    <g:img dir="images" file="logo.gif"/>
</div>

<nav class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
        ...
        </div>
    </div>
</nav>

Which produces:

maybe best attempt

Upvotes: 0

Views: 1010

Answers (1)

Mohamad
Mohamad

Reputation: 35349

Here's a demo: http://codepen.io/anon/pen/nCoyB

You either create a single row and style your divs accordingly, or, if you insist on having Bootstrap rows, play around with heights and margins.

This solution is the latter. Notice there is a gap between Logo-1 and the nav; this is because BS has margins on it's .spanx classes. You can over ride it.

<div class="row-fluid">
  <div class="span3">
    <div class="logo-1">Logo 1</div>
  </div>

  <div class="span9">
    <div class="row-fluid">
      <div class="span12">
        <div class="logo-2 pull-right">Logo 2</div>
      </div>
      <div class="span12">
        <nav class="nav">Nav</div>
      </div>      
    </div>
  </div>
</div>


.logo-1 {
  border: 1px solid #ccc;
  height: 70px;
  margin: 30px 0;
  padding: 10px;  
}

.logo-2 {
  border: 1px solid #ccc;
  height: 65px;
  margin: 0 0 10px;
}

nav {
  border: 1px solid #ccc;
  height: 40px;
  width: 100%;
}

Upvotes: 1

Related Questions