Twitter Bootstrap響應式不起作用

Question

我正在使用twitter bootstrap做一些測試，對我來說最重要的事情之一是它具有響應能力。 但是，我正在使用瀏覽器進行一些測試，當瀏覽器達到某個大小時，它將完全更改布局中輸入的大小。

在大屏幕圖片下方，然后在以下情況下退出：

這是我使用的布局ZendFramework 1:13的代碼：

Zend形式：

$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');

我的觀點：

包括所有引導css文件！

生成的html：

生成的html

先感謝您！

Answer 1

將您的HTML結構更改為

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

更新以支持bootstrap 3.x版本。

<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>

Answer 2

您可以使用class span*設置輸入的寬度。 在767px視口以下，列會變得流暢並垂直堆疊。 （請參閱http://twitter.github.io/bootstrap/scaffolding.html#sensitive ）。 因此，在小屏幕上， span*的寬度為100％。 您必須使用媒體查詢來更改輸入的寬度。