Responsive navbar with Bootstrap 2.3.2

Question

I´m using Bootstrap 2.3.2 in my website. I´m trying to make to 100% responsive (it´s like 70%), so, I would like to use a navbar to collapse in small resolutions.

This is my code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">
            <div>
                <a class="brand" href="/{{locationService.getLangKey()}}" style="text-decoration: none"><img src="img/logo.png" /><span class="logo">yanpy</span></a>               
            </div>
        </div>
        <div class="span8 pull-right" style="padding-right: 10px">
            <div class="navbar">
                <div class="navbar-inner custom-navbar-inner">  
                    <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
                    <div class="nav-collapse collapse" style="padding-top: 4px">                   
                        <!--<div ng-include src="'partials/login.html'"></div>-->                     
                    </div><!--/.nav-collapse -->
                </div><!-- /.navbar-inner -->
            </div><!-- /.navbar -->
        </div> <!-- span8 -->
    </div>
</div>

For some reason, the span4 and span8 are not working properly in 480px width. I don´t know why span4 is taking the whole row width.

Answer 1

This version of bootstrap, spans below:

@media (max-width: 767px)

default to 100% width. You will have to remove the below style for the spans to work below this screen width. You need to find the below and remove the width:100% line.

    @media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
  float: none;
  display: block;
  width: 100%;
  margin-left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}