如何使用bootstrap控制輸入的寬度

Question

我試圖控制我的寬度為我的輸入，但我遇到了一些麻煩。 這是我的標記

<section class="bg-lb pt40 pb40 btborder">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="bg-white ">
                    <div class="pt40 pb40">
                        <a class="btn btn-default hvr-fade">Login</a>
                        <span id="cricle"><b>OR</b></span>
                        <a class="btn btn-default hvr-fade">Register</a>
                    </div>
                    <form>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-person"></span></div>
                                <input type="text" id="" class="form-control" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-android-lock"></span></div>
                                <input type="password" id="" class="form-control" placeholder="Password">
                            </div>
                        </div>
                        <a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

我只是簡單地嘗試減少輸入的寬度並使表單居中，在這里實時預覽http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview

Answer 1

如果要繼續使用網格系統，可以更改col-的設置方式。

更改：

 <div class="row"> <div class="col-sm-12"> <div class="bg-white"> <form> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="ion-person"></span> </div> <input type="text" id="" class="form-control" placeholder="Username"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="ion-android-lock"></span> </div> <input type="password" id="" class="form-control" placeholder="Password"> </div> </div> </form> </div> </div> </div> 

至：

 <div class="row"> <div class="bg-white"> <form> <div class="col-md-6 col-md-offset-3"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="ion-person"></span> </div> <input type="text" id="" class="form-control" placeholder="Username"> </div> </div> </div> <div class="col-md-6 col-md-offset-3"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="ion-android-lock"></span> </div> <input type="password" id="" class="form-control" placeholder="Password"> </div> </div> </div> </form> </div> </div> 

主要區別在於<div class="col-md-6 col-md-offset-3">現在專門包裝<div class="form-group"> 。 col-md-offset-3是你的形式的中心。

或者更進一步，為每個<div class="form-group">創建一個新的<div class="row"> ，而不是將所有列嵌入到一行中。

Answer 2

引導方式是減少表單所在列的寬度。使用3列可以使表單居中：

<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>

http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview

Answer 3

只需在特定位置覆蓋bootstrap .css 。 試試這個，例如：

把它放在CSS里面：

input.form-control{
  max-width: 100px;
}

input.form-control將覆蓋每個input並將類設置為： form-control

或者您可以縮小整個container class

.container{
  max-width: 250px;
}

在此測試： http ： //plnkr.co/edit/kR69nCvsDCp9AlQqZztY？p = preview