如何使用Bootstrap调整表单文本字段输入的大小?

时间:2016-11-17 17:02:43

标签: html css twitter-bootstrap twitter-bootstrap-3

所以我有一个目前看起来像这样的表格:

enter image description here

除了我希望这一切都在一条线上。为此,我正在尝试调整文本字段的大小以使它们变小。基本上,我将col-md-1添加到封装div标记的input,如下所示:

    <div className="form-group margin-right-5 col-md-1">
                <input
                    className="form-control"
                    type='text'
                    placeholder='Company' 
                />
            </div>

但是当我这样做时,我明白了:

enter image description here

为什么会这样?这是因为col-md-1实际上比我当前的文本字段长吗?有没有其他方法可以让我的输入字段更短,以便它们都适合一行?

我是初学者,所以任何帮助都会非常感谢,谢谢!!

[编辑] 的 作为参考,我的代码结构如下:

    <td>
        <div className="row padding top">
        <div className="row">
        <form action="" className="form-inline form margin-bottom-5">
            <div className="form-group margin-right-5 col-md-1">
                <input
                    className="form-control"
                    type='text'
                    placeholder='Company'
                />
            </div>
            <div className="form-group margin-right-5 col-md-1">
                <input
                    className="form-control"
                    type='text'
                    placeholder='Title'
                />
            </div>
            <div className="form-group margin-right-5">
                <input
                    className="form-control"
                    type='text'
                    placeholder='Start Month'
                />
            </div>
            <div className="form-group margin-right-5">
                <input
                    className="form-control"
                    type='text'
                    placeholder='Start Year'
                />
            </div>
            <div>
                <p> - </p>
            </div>
            <div className="form-group margin-right-5">
                <input
                    className="form-control"
                    type='text'
                    placeholder='End Month'
                />
            </div>
            <div className="form-group margin-right-5">
                <input
                    className="form-control"
                    type='text'
                    placeholder='End Year'
                />
            </div>

        </form>
        </div>
        </div>
    </td>

0 个答案:

没有答案