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

查看：20
本文介绍了Twitter Bootstrap:停止输入字段超出井的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在尝试解决此问题时遇到问题.文档说我应该将跨度设置为等于父跨度，但是，当我这样做时，它会延伸到井容器的右侧.在移动设备上查看时看起来不错(向右扩展适当的量，填充井)，但是，在桌面上播放效果不佳(我希望字段扩展到井内).

<div class="row"><div class="span4 offset4"><div id="登录面板"><div class="wellbordered clearfix"><div class="text-center"><div class="page-header" style="border-bottom: none; margin: 0;"><img src="library/img/logo-01.png"/>

<form method="POST" action="#" accept-charset="UTF-8" class="pull-left"><legend>应用名称</legend><div class="控制组"><!-- 用户名字段--><div class="控件"><label>电子邮件</label><input class="span4" type="text" name="email" value="" id="email" placeholder="您的电子邮件地址">

<div class="control-group"><label>密码</label><!-- 密码字段--><input type="password" name="password" id="password" placeholder="密码">

<div class="控制组"><p><input class="btn btn-default pull-left" type="submit" value="注册"><input class="btn btn-primary pull-right" type="submit" value="登录"></p>

</表单>

<!-- 结束行-->

<!-- 结束容器-->

解决方案

文档实际上是在说:

<块引用>

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

但是你想制作一个全角的，对吗?

制作一个 以获取全宽

input.full-width {box-sizing: 边框框；宽度:100%；高度:30px；}

同时从

中删除 .pull-left.看看它如何在 this fiddle 上工作.

<小时>

编辑

从 Bootstrap 2.2.0 开始使用捆绑的 input-block-level 类来实现这个效果.

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

解决方案

Docs are actually saying:

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

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

Make an <input> to take full width

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

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

Edit

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆