43

I'm using twitter bootstrap.

I'm trying to create a button with dropdown that should be displayed right after a text.

The button and everything are created but it appears on the next line instead of being on the same line as my texte.

This is more or less the code:

<h1> Some title


    <div class="btn-group" xmlns="http://www.w3.org/1999/html">
      <button class="btn btn-mini">Edit</button>
      <button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
         <li> ...my menu's...</li>
      </ul>
    </div>
</h1>

The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.

What's wrong? Thx!

UPDATE:

I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.

1

1 Answer 1

50

I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)

<h1> Some title
    <small>
        <span class="btn-group">
            <button class="btn btn-mini">Edit</button>
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">...my menus...</a></li>
            </ul>
        </span>
    </small>
</h1>
h1 .btn-group { display: inline-block; }

I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.

2
  • Thank you so much. I had tried inline-block many times but at h1 level instead of putting it in btn-group. <div> inside h1 is actually ok.
    – ndemoreau
    Aug 6, 2012 at 22:08
  • 2
    @ndemoreau I'm not worried about a <div> since there is also a <ul>, but you want an inline-like behavior, so <span> seems more appropriate. Both work anyway.
    – Sherbrow
    Aug 6, 2012 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.