CODEWITHSUNDEEP
csstwitter-bootstrap
robbie
robbie

Reputation: 647

Bootstrap <a> list-group-item format breaks when including col-xx-x spans

This example illustrates the problem I'm having. Example 1 and 2, are perfect. No issues. In example 3, the format falls apart and I'm not sure why. How can I make Example 3 look like the other examples, but allow me to grid out the list-group-item.

Upvotes: 2

Views: 2672

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240968

One solution would be to add the clearfix class to the list-group-item elements because their children elements are floated. I would recommend the alternative solution below, though. This solution doesn't produce the desired results due to the fact that the columns' padding isn't displaced.

Updated Example

<div class="list-group">
  <a href="" class="list-group-item clearfix">
      <span class="col-md-6">One Item</span>
      <span class="col-md-6">OneB Item</span>
  </a>
  <a href="" class="list-group-item clearfix">
      <span class="col-md-6">Two Item</span>
      <span class="col-md-6">TwoB Item</span>
  </a>
</div>

Alternatively, you could also just wrap the column elements with the .row class, which has a built in clearfix. This is probably the better solution given that the rows displace the padding with margin-right: -15px/margin-left: -15px.

In HTML5 it's fine to have a div element within an anchor element.

Updated Example

<div class="list-group">
  <a href="" class="list-group-item">
    <div class="row">
      <span class="col-md-6">One Item</span>
      <span class="col-md-6">OneB Item</span>
    </div>
  </a>
  <a href="" class="list-group-item">
    <div class="row">
      <span class="col-md-6">Two Item</span>
      <span class="col-md-6">TwoB Item</span>
    </div>
  </a>
</div>

Upvotes: 5

Devin
Devin

Reputation: 7720

Your problem relies on really bad coding practices, hence you had a good result only by luck, but you can't reproduce it because.... it's bad from the start.

Just change your HTML in sample 3 like this:

<!-- Example 3 -->
<ul class="list-group">
  <li class="row list-group-item"><span class="col-md-6">One Item</span><span class="col-md-6">OneB Item</span></li>
  <li class="row list-group-item"><span class="col-md-6">Two Item</span><span class="col-md-6">TwoB Item</span></li>
</ul>

Now you'll see how I use ROW CLASS which is needed for Bootstrap.... rows. But most important, I use the li element inside ul element, which is like 99% of the solution to your issue. Basically, just use HTML as intended and it will work most of the times. Also, get used to test in Validator, you'll get fast answers at a glimpse without having to wait here for an answer.

EDIT: Needless to say you must change your other samples that work by luck

Upvotes: 0

Related Questions