CODEWITHSUNDEEP
csstwitter-bootstrap
Jon
Jon

Reputation: 833

Vertical stacking span labels in bootstrap

I am trying to stack spans inside of a bootstrap div.controls. Multiple span.label's default to stack horizontally but I would like each span.label to be vertically listed instead, on it's own line per se.

This is currently how I have it displaying:

<div class="controls readonly-display">
    <span class="label">test</span>
    <span class="label">test 2</span>
</div>

http://jsfiddle.net/gMN4f/3/

Upvotes: 2

Views: 9225

Answers (2)

Jon
Jon

Reputation: 833

Using a list is the right option here. I got stuck down the styling path and forgot about changing the structure instead. Actually, surrounding the span elements with a unordered list actually made the vertical spacing between list items look better too.

Here is what I ended up with:

<div class="controls readonly-display">
    <ul class="unstyled">
        <li><span class="label">test</span></li>
        <li><span class="label">test 2</span></li>
    </ul>
</div>

Thanks for the help. Sorry for the brain fart question.

Upvotes: 1

Joe Conlin
Joe Conlin

Reputation: 5994

I agree that you should maybe look at using a list but if not, simply add the following to have your spans stack vertically:

span {
  position: relative;
  display: block;
}

Here is an example: http://jsfiddle.net/gMN4f/4/

Upvotes: 6

Related Questions