引导 col 嵌套继承主 col 样式

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;
}

我试图设置一个小提琴，但 ofc 它不适用于轨道标签......

Answer 1

想通了，缺少一个-，不得不将它们张贴在主山坳之外，并偏移到中心。这是最终结果：

<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>