Twitter Bootstrap Responsive not work

I'm doing some testing with twitter bootstrap and one of the most important things for me is that it is responsive. However I am doing some tests with my browser and when it gets to a certain size it completely changes the size of my input in the layout.

below a picture of the big screen and then tail off when:

This is the code I'm using my layout ZendFramework 1:13:

Zend Form:

$login = new Zend_Form_Element_Text('ds_nick_usr');
    $login->setLabel('Login:')
          ->setRequired(true)
          ->addFilter('StripTags')
          ->addFilter('StringTrim')
          ->setOptions(array(
            'placeholder'=>'Usuario',
            'class'=>'span1'

          ));
    $login->removeDecorator('Label');
    $login->removeDecorator('Htmltag');



    $password = new Zend_Form_Element_Password('ds_password_usr');
    $password->setLabel('Senha:')
             ->setRequired(true)
             ->addFilter('StripTags')
             ->addFilter('StringTrim')
             ->setOptions(array(
                'placeholder'=>'Senha',
                'class'=>'span2',
        ));
    $password->removeDecorator('Label');
    $password->removeDecorator('HtmlTag');




    $submit = new Zend_Form_Element_Submit('Logar');
    $submit->setOptions(array(
       'class'=>'btn btn-inverse',
    ));

    $this->addElements(array($login, $password, $submit));

    $this->setDecorators(array(
       'FormElements',
        array('HtmlTag', array('tag'=>'div', 'class'=>'form-horizontal')),
        'Form',

    ));

    $this->setMethod('post');

My View:

All bootstrap css files are included!

generated html:

generated html

Thank you in advance!

Answers


Change your HTML structure to

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <form class="form-horizontal form-signin" method="post">
            ...
            </form>
        </div>
    </div>
</div>

UPDATED to support bootstrap 3.x versions.

<div class="container-fluid">
    <div class="row">
        <!-- col-xs-12 or col-sm-12 or col-md-12 or col-lg-12 -->
        <div class="col-xs-12">
            <form class="form-horizontal form-signin" method="post">
                ...
            </form>
        </div>
    </div>
</div>

Need Your Help

iOS: how to implement a shared method for two API callbacks returning the same result/error set

ios objective-c api asynchronous callback

I am writing a client APP calling an API and processing the results in a a callback method.

Start a class with redirected input

java multithreading redirect process stdout

I need to reformat the command-line logging of a Java app without touching the original app. I have all the code, so I've imported into my project. What I would like to do is figure out a way to m...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.