Twitter Bootstrap:停止输入字段超出了范围 [英] Twitter Bootstrap: Stop input field extending beyond well

问题描述

我在尝试解决此问题时遇到了麻烦.文档说我应该将跨度设置为等于父跨度，但是，当我这样做时，它会延伸到井容器的右侧.在移动设备上观看时看起来不错(将适当的数量扩展到右边，填满了孔)，但是，在台式机上效果不佳(我希望字段在孔内扩展).

I'm having trouble trying to resolve this issue. The docs say that I should set the span equal to the parent span, however, it extends to the right outside of the well container when I do that. It looks fine when viewed on mobile (extends the appropriate amount to the right, filling the well), however, it doesn't play well on desktop (I want the fields to extend inside the well).

<div class="container">
    <div class="row">
        <div class="span4 offset4">
            <div id="login-panel">
                <div class="well bordered clearfix">
                    <div class="text-center">
                        <div class="page-header" style="border-bottom: none; margin: 0;">
                            <img src="library/img/logo-01.png"/>
                        </div>
                    </div>
                    <form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
                        <legend>App name</legend>
                        <div class="control-group ">
                            <!-- username field -->
                            <div class="controls">
                                <label>Email</label>
                                <input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
                            </div>
                        </div>

                        <div class="control-group">
                            <label>Password</label>
                            <!-- password field -->
                            <input type="password" name="password" id="password" placeholder="Password">
                        </div>
                        <div class="control-group ">
                            <p>
                                <input class="btn btn-default pull-left" type="submit" value="Sign-up">
                                <input class="btn btn-primary pull-right" type="submit" value="Login">
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end row -->
</div> <!-- end container -->

推荐答案

文档实际上是在说:

对于匹配相同网格大小的输入，使用 .span1 至 .span12 列.

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

但是您想制作全角<input>，对吧?

But you want to make a full-width <input>, right?

input.full-width {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
}

还要从<form>中删除.pull-left.看看如何在这把小提琴上醒来.

Also remove .pull-left from the <form>. See how it woks on this fiddle.

自Bootstrap 2.2.0起，使用捆绑的input-block-level类来实现此效果.

Since Bootstrap 2.2.0 use bundled input-block-level class to achieve this effect.

这篇关于Twitter Bootstrap:停止输入字段超出了范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！