Question

我正在为我的登录页面构建一个布局，并且在按钮排队时遇到问题。我已经使用自定义类来居中我的用户名和密码表单，现在想要有2个相同大小的按钮用于登录并在其下方注册。我尝试使用与父级一半大小的col实现此目的，但到目前为止，它们的大小相同。对我所做错的任何帮助都表示赞赏。

HTML：

<div class="col-xs-4 centered">
        <%= form_tag sessions_path do %>
        <div class="form-group">

        <%= label_tag :email %>
        <%= text_field_tag :email, params[:email], class:'form-control' %><br/>

        <%= label_tag :password %>
        <%= password_field_tag :password, nil, class:'form-control' %><br/>

        <div class="col xs-2">
        <%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
        </div>
        <div class="col xs-2">
        <%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
        </div>
        <% end %>
        </div>
</div>

的CSS：

.btnstyle {
    width:100%;
}

.centered  {
    float: none;
    margin: 0 auto;
}

我试图设置一个小提琴，但是它不能用于rails标签...

Answer 1

想通了，失去了-并且不得不将它们发布到主要col的外面并且偏移到中心。这是最终结果：

<div class="col-xs-4 centered">
        <%= form_tag sessions_path do %>
        <div class="form-group">

        <%= label_tag :email %>
        <%= text_field_tag :email, params[:email], class:'form-control' %><br/>

        <%= label_tag :password %>
        <%= password_field_tag :password, nil, class:'form-control' %><br/>
        </div>
</div>
        <div class="col-xs-2 col-xs-offset-4">
        <%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
        </div>
        <div class="col-xs-2">
        <%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
        </div>
        <% end %>
        </div>

bootstraps col nesting继承了主要的col风格

1 个答案: