如何通过引导减少输入元素的宽度

问题描述：

我失去了我的想法，无论我做什么我的布局保持奇怪的事情。如何通过引导减少输入元素的宽度

我有一个简单的表单代码：

<div class="center jumbotron"> 
    <%= form_for(@user, url: signup_path) do |f| %> 
     <%= render 'shared/error_messages' %> 
     <%= f.label t(:email) %> 
     <%= f.text_field :email, class: 'form-control' %> 
     <%= f.label t(:password) %> 
     <%= f.password_field :password, class: 'form-control' %> 
     <%= f.label t(:first_name) %> 
     <%= f.text_field :first_name, class: 'form-control' %> 
     <%= f.label t(:last_name) %> 
     <%= f.text_field :last_name, class: 'form-control' %> 
     <%= f.label t(:student_id) %> 
     <%= f.text_field :student_id, class: 'form-control' %> 
     <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %> 
    <% end %> 
</div>

它看起来像所有我想要做的就是减少投入宽度约25％（或3周的cols），同时保持响应式布局。例如，当我尝试使用窗体控件类将div中的整个窗体包装到div中时，然后将每个输入+标签用行类和另一个div与col-xs-3类相包装，输入变为内联并缩放把一个放在另一个之下。

答

完整的答案是@Kasunjith而@Stephen答案的组合被改写。 @Kasunjith的回答给予了适当的位置，@Stephen确保它在所有设备上都能够响应。

最终代码看起来是这样的：

<div class="center jumbotron"> 
    <%= form_for(@user, url: signup_path) do |f| %> 
     <%= render 'shared/error_messages' %> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
      <%= f.label t(:email) %> 
      <%= f.text_field :email, class: 'form-control' %> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
      <%= f.label t(:password) %> 
      <%= f.password_field :password, class: 'form-control' %> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
      <%= f.label t(:first_name) %> 
      <%= f.text_field :first_name, class: 'form-control' %> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
      <%= f.label t(:last_name) %> 
      <%= f.text_field :last_name, class: 'form-control' %> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
      <%= f.label t(:student_id) %> 
      <%= f.text_field :student_id, class: 'form-control' %> 
      </div> 
     </div> 
     <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %> 
    <% end %> 
</div>

答

我希望你可能正在做的正确，但你需要给每个列的偏移，以便它不会使每个内联和使用行。见引导文件的位置：http://getbootstrap.com/css/#grid-offsetting

它可能应该看起来像

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <%= f.label t(:email) %> 
    <%= f.text_field :email, class: 'form-control' %> 
    </div> 
</div>

等等

答

您可以在形式试试这个代码一个元素

<div class="OneFormElement"> 
<div class="row"> 
<div Class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
<%= f.label t(:email) %> 
</div> 
</div> 
<div class="row"> 
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
<%= f.text_field :email, class: 'form-control' %> 
</div> 
</div> 
</div>

答

这里是Bootstrap文档的链接。 custom column sizing

从文档： Bootstrap包括一个响应式移动式第一流体网格系统，可随着设备或视口尺寸的增加适当扩展至12列。它包含预定义的类以实现简单的布局选项，以及用于生成更多语义布局的强大mixin。

您的代码可以如下

<div class="center jumbotron"> 
    <%= form_for(@user, url: signup_path) do |f| %> 
     <%= render 'shared/error_messages' %> 
      <div class="row"> 
      <div class="col-md-3"> <!-- this can be changed as per your requirement --> 
       <%= f.label t(:email) %> 
       <%= f.text_field :email, class: 'form-control' %> 
      </div> 
      <div class="col-md-3"> 
       <%= f.label t(:password) %> 
       <%= f.password_field :password, class: 'form-control' %> 
      </div> 
      </div> 
      <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %> 
    <% end %> 
</div>

如何通过引导减少输入元素的宽度

相关推荐