中心在引导程序中对齐文本框

时间:2014-06-15 08:04:00

标签: html twitter-bootstrap

我想要做的是将3个文本框和按钮居中对齐。我怎么能这样做?

 <div class="navbar_foot navbar-default navbar-fixed-bottom">


        <form class="navbar-form navbar-middle">
            <div class="form-group">
                <div class="row featurette">
                    <div class="col-md-3">
                        <input class="form-control input-lg" type="text" id="inputLarge"
                            value="" placeholder="Email Address">

                    </div>
                    <div class="col-md-3 ">
                        <input class="form-control input-lg" type="text" id="email"
                            value="" placeholder="Repeat Email Address">

                    </div>

                    <div class="col-md-3 ">
                        <input class="form-control input-lg" type="password" id="lName"
                            value="" placeholder="Password">
                    </div>

                    <div class="col-md-3 ">
                        <button type="button" class="btn btn-primary btn-lg">Register
                            Today</button>
                        <a href="#myModal" role="button" id="myButt"
                            class="btn btn-large btn-primary" data-toggle="modal">Launch
                            Demo Modal</a>

                    </div>


                </div>



            </div>
        </form>

    </div>

CSS

.navbar_foot .navbar-collapse_foot {
    text-align: center;
    align: center;
    display: inline-block;
    float: none;
}

2 个答案:

答案 0 :(得分:2)

如果您删除.navbar-collapse_foot

,您的课程就会正常工作

http://jsfiddle.net/DianaNassar/6BEmY/

.navbar_foot{
    text-align: center;
    align: center;
    display: inline-block;
    float: none;
}

<强>更新

如果你想让他们在旁边,而不是在下面,彼此:

http://jsfiddle.net/DianaNassar/Mhy7P/

答案 1 :(得分:0)

您可以将这些行添加到您的css文件中:

.col-md-3 {
text-align: center
}

这将使您的文本框在中心对齐。

经过测试:http://jsbin.com/kekan/1/edit