Question

I’m using the css styles from Twitter Bootstrap but I can’t seem to align my “span16” div with my breadcrumb container. The breadcrumb container is the size I need. I’ve attached a screenshot to show the issue.

Here is my HTML:

<div class="container">
    <ul class="breadcrumb" style="margin-top: 10px;">
        <li><a href="search.php">Search</a>&raquo;</li>
        <li class="active">Basic</li>
    </ul>

    <div class="row">
        <div class="span16 well">
            <form id="form_id" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
                <div class="row">
                    <div class="span-one-third">
                        Span 1/3
                    </div>
                    <div class="span-one-third">
                        Span 2/3
                    </div>
                    <div class="span-one-third">
                        Span 3/3
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

You can view the full page here

Any idea what the issue is?

Answer 1

The span16 is wider than the container. The breadcrumb is restricted by the width of the container. Increasing the size of the container will allow the breadcrumb to match up.