Bootstrap輸入組寬度設置

Question

我開始使用CSS，JS和HTML的巫術。

現在我有這樣的構建體：

.... 
<div class="signup row_centered sr_simple" data-spy="affix" data-offset-top="300"> 
    <form class="form-inline" role="form" id="signup"> 
     <div class="form-group"> 
      <div class="input-group" id="signup_inputs"> 
       <input type="email" class="form-control input-lg" name="EMAIL" id="signup_email" placeholder="Enter email address..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default fade_signup input-lg btn-warning" type="submit" id="signup_button">Get Early Access!</button> 
       </span> 
      </div> 
     </div> 
    </form> 
</div> 
... 

我想爲中心的內聯形式基團，但具有特定的寬度。設置col-xx-yy不起作用。因此，要指定整個表格的寬度，唯一的辦法是這樣的（我猜）丐：

@media (min-width : 768px) { 
#signup_email { 
    width : 450px; 
} 
} 

@media (max-width : 767px) { 
    #signup_inputs { 
    width  : auto; 
    margin-left : 5%; 
    margin-right : 5%; 
    } 
} 

我應該如何設置輸入表格的寬度適當的寬度不同？或者我的方法是否正確？

Answer 1

似乎沒有任何理由需要form-inline（您只有一個沒有標籤的輸入）。除去這個，並使用你準備好的規則以及一個簡單的margin: auto，你應該很好。

注意：對於輸入的基團中的不同尺寸的輸入，使用Input-Group-Sizing

工作示例片段。

@media (min-width: 768px) { 
 
    .signup { 
 
    width: 450px; 
 
    margin: auto; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .signup { 
 
    width: auto; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="signup"> 
 
    <form role="form"> 
 
    <div class="form-group"> 
 
     <div class="input-group input-group-lg"> 
 
     <input type="email" class="form-control" name="email" placeholder="Enter email address..."> 
 
     <span class="input-group-btn"> 
 
      <button class="btn btn-warning" type="submit">Get Early Access!</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>