0

I have this HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">Logo</div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-11">Main menu</div>
                <div class="col-md-1">Search</div>
            </div>
        </div>
    </div>
</div>

and I want to move the Search div on the same row as the Logo div for col-sm-* and the Menu div bellow them in full width. I know Bootstrap is mobile-first but that doesn't help me do it.

Here's a fiddle link with the example and extra markup: https://jsfiddle.net/v54ba3bw/

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
VjS
  • 7
  • 4
  • BTW, I need nested row because the Search div has to be smaller then `col-md-1`. – VjS Mar 25 '15 at 11:03
  • 3
    If I understand correctly, you want to have the logo and search on the same row when viewed in col-sm-*. Is this correct? If yes, you will not be able to nest the Search and Menu together to accomplish your goal. If you could be a bit more clear we can help.. – Joe Conlin Mar 25 '15 at 15:15
  • @JoeConlin That's it. On `col-sm-*`, the Logo and Search `div`s should be on the same row and the Menu `div` should be below them in full width. The above code can be changed in any way for this to be accomplished, but I need the Search `div` to be of less then `col-md-1` size. – VjS Mar 26 '15 at 08:50
  • Well, first thing is that there are no smaller grid sizes than `col-md-1`. It sounds like maybe you are just using an icon. If you need more than the available 11 columns next to it the only option you really have is to wrap both elements in the same grid and use css to position them. Having said that, you need to make sure you address all screen sizes (which using grids do for you). I'm still a bit unclear why you would need less than 1 column...if you can supply an image or something to better illustrate what you are trying to do, or create a Fiddle, it would help.. – Joe Conlin Mar 26 '15 at 15:51
  • http://fiddle.jshell.net/2njymsxv/ Ignore the JavaScript as it only helps with the Expand button. That's what the layout is like, the search button is a icon that, when clicked, should show the input field, otherwise it shouldn't take up much space, and the menu items are right aligned, so I can't have much space between the icon and the menu items. – VjS Mar 27 '15 at 08:21

0 Answers0