CODEWITHSUNDEEP
phpzend-frameworktwitter-bootstrapresponsive-designzend-form
Marcos Bergamo
Marcos Bergamo

Reputation: 1123

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:

Big screen

Reduced screen

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: my view

All bootstrap css files are included!

generated html:

generated html

Thank you in advance!

Upvotes: 0

Views: 724

Answers (2)

Madan Sapkota
Madan Sapkota

Reputation: 26101

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>

Upvotes: 2

Bass Jobsen
Bass Jobsen

Reputation: 49054

You set the width of your inputs with class span*. Below 767px viewports, the columns become fluid and stack vertically. (see http://twitter.github.io/bootstrap/scaffolding.html#responsive). So on small screens span* gets width:100%. You had to use media queries to change the width of your inputs.

Upvotes: 1

Related Questions