如何在引導中輸入形式？

我想有兩個輸入（登錄和密碼）。一個一個，每個關於col-sm-6。如果沒有col-sm-offset-3，我不能將這些輸入居中。有了偏移量它確實有效，但我希望將這些輸入集中在每個屏幕上。也許我可以在某處添加.center>或者margin auto？但是，在...如何在引導中輸入形式？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     <div class="col-lg-12"> 
 
     <hr> 
 
     <h4 class="text-center">Logowanie</h4> 
 
     <hr> 
 
     <form method="post" role="form" class="form-horizontal"> 
 
      {{ csrf_field() }} 
 
      <div class="row"> 
 
      <div class="form-group"> 
 
       <div class="col-sm-6"> 
 
       <input type="email" class="form-control" name="email" placeholder="email"> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <div class="col-sm-6"> 
 
       <input type="email" class="form-control" name="email" placeholder="email"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-12 wenus

使用通過xs層上的所有屏幕上的偏移..

http://www.bootply.com/P31H4uF1QG

  <form method="post" role="form" class="form-horizontal"> 
        {{ csrf_field() }} 
        <div class="form-group"> 
        <div class="col-xs-6 col-xs-offset-3"> 
         <input type="email" class="form-control" name="email"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-xs-6 col-xs-offset-3"> 
         <input type="email" class="form-control" name="email" placeholder="email"> 
        </div> 
        </div> 
     </form>

另外，不要使用row和form-group，因爲form-group的工作原理類似於row包含col-*

來源

2017-05-12 13:34:29 ZimSystem

如果你不想使用offset您可以使用爲中心的課堂我稱之爲.centered並將此作爲一個包裝到你想要中心內容。

請參見下面的例子：

.centered { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="row"> 
 
    <div class="box"> 
 
     <div class="col-lg-12"> 
 
     <hr> 
 
     <h4 class="text-center">Logowanie</h4> 
 
     <hr> 
 
     <form method="post" role="form" class="form-horizontal"> 
 
      {{ csrf_field() }} 
 
      <div class="form-group centered"> 
 
       <div class="col-sm-6"> 
 
       <input type="email" class="form-control" name="email" placeholder="email"> 
 
       </div> 
 
      </div> 
 
      <div class="form-group centered"> 
 
       <div class="col-sm-6"> 
 
       <input type="email" class="form-control" name="email" placeholder="email"> 
 
       </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-12 13:36:08

使用具有小偏移所有的屏幕和包裝形式在這個div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="box"> 
 
      <div class="col-lg-12"> 
 
       <hr> 
 
       <h4 class="text-center">Logowanie</h4> 
 
       <hr> 
 
       <div class="row"> 
 
        <div class="col-sm-offset-3 col-sm-6"> 
 
        <form method="post" role="form" class="form-horizontal"> 
 
         {{ csrf_field() }} 
 
         <div class="form-group"> 
 
         <div class="col-sm-12"> 
 
          <input type="email" class="form-control" name="email" placeholder="email"> 
 
         </div> 
 
         </div> 
 
         <div class="form-group"> 
 
         <div class="col-sm-12"> 
 
          <input type="email" class="form-control" name="email" placeholder="email"> 
 
         </div> 
 
         </div>       
 
        </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-12 13:37:34

默認情況下，Bootstrap中的輸入有width: 100%。因此，您需要重寫此樣式屬性（例如設置width:50%）並將中心或文本中心類添加到父元素，並且它始終將居中。

但我強烈建議你使用列：

<div class="col-xs-offset-3 col-xs-6 col-md-offset-4 col-md-4"> 
<input type="email" class="form-control" name="email" placeholder="email"> 
</div>

來源

2017-05-12 13:37:41

如何在引導中輸入形式？

回答

相關問題