php - 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#responsive）。所以在小屏幕上span*得到宽度：100%。您必须使用媒体查询来更改输入的宽度。