覆盖bootstrap float＆amp;余量

Question

我有一个类似于以下的页面。

现在我试图通过使用twitter boostrap <div class= hero-unit>来复制这个。我完成了以下工作：

<div class="center hero-unit">
  <table class="form">
    <tr>
      <td>
        <%= form_for(@user) do |f| %>
            <% if @user.errors.any? %>
                <div id="error_explanation" xmlns="http://www.w3.org/1999/html">
                  <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

                  <ul>
                    <% @user.errors.full_messages.each do |msg| %>
                        <li><%= msg %></li>
                    <% end %>
                  </ul>
                </div>
            <% end %>
            </td>
            </tr>
            <tr>
              <td class="th" colspan="2">Login Details</td>
            </tr>
            <tr>
              <% if @user.id %>
                  <td><%= f.label :id %></td>
                  <td><%= @user.id %></td>

              <% end %>
            </tr>
            <tr>
              <td><%= f.label :current_sign_in_at, "Sign in time" %></td>
              <td><%= @user.current_sign_in_at.nil? ? "Not signed in" : @user.current_sign_in_at.strftime('%d-%b-%Y %H:%M:%S') %></td>

            </tr>
            <tr>
              <td> <%= f.label :first_name %>
                <br/></td>
              <td><%= @user.first_name %></td>
            </tr>
            <tr>
              <td><%= f.label :last_name %>
                <br/></td>
              <td><%= @user.last_name %></td>
            </tr>
            <tr>
              <td><%= f.label :email %>
                <br/></td>
              <td><%= @user.email %></td>
            </tr>
            <% if can? :manage, :all %>
                <tr>
                  <td class="th" colspan=2>Roles and Privileges</td>
                </tr>
                <tr>
                  <% for role in Role.all %>
                      <td><%= role.name %><%= check_box_tag "user[role_ids][]", role.id, @user.roles.include?(role), :disabled => true %></td>
                  <% end %>
                </tr>
            <% end %>
            <tr>
              <td>
                <%= link_to 'Edit', edit_user_path(@user), :class => 'btn btn-medium' %> |
                <%= link_to 'Back', usermanagement_path, :class => 'btn btn-medium' %>
              </td>
            </tr>
                </table>
            <table class="form" >
              <% if @user == current_user %>
                  <caption><b>Previous Orders</b></caption>
                  <thead>
                  <tr>
                    <th>Order No:</th>
                    <th>Order Date</th>
                    <th>Quantity</th>
                    <th>Total</th>
                    <th>View Order</th>
                  </tr>
                  </thead>
                  <% current_user.orders.each do |order| %>
                      <tr>
                        <td style="width: 10px;"><%= order.id %></td>
                        <td><%= order.created_at.to_s(:short) %></td>
                        <td><%= order.quantity %></td>
                        <td><%= number_to_currency(order.total_price, :unit => "£") %></td>
                        <td><%= link_to 'View Order',(order)%></td>
                      </tr>
                  <% end %>
                  <% if current_user.orders.empty? %>
                      <tr>
                        <td>No bookings found</td>
                      </tr>
                  <% end %>
                  </table>


                </div>
        <% end %>
<% end %>

以上更改输出以下内容：

那么我的问题是如何才能使它与login details的右侧对齐。我确实尝试在<table style="float: left; margin-left: 20px;">表上执行以下Previous Orders。为什么这不起作用！

Answer 1

我试图模仿下面显示的表格。由于您使用的是Bootstrap，我建议您查看Responsive Tables。有各种示例说明如何为较小的屏幕创建和表示表格。
这是同一个Jsfiddle with tables的jsfiddle

<div class="hero-unit">
<div class="row">
    <div class="span4">
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>Login Details</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>ID</td>
                    <td>1</td>
                </tr>
                <tr class="error">
                    <td>Sign in Time</td>
                    <td>01/04/2013 11:35am</td>
                </tr>
                <tr class="warning">
                    <td>First Name</td>
                    <td>Jack</td>
                </tr>
                <tr class="info">
                    <td>Last Name</td>
                    <td>Sparrow</td>
                </tr>
                <tr class="warning">
                    <td>Email Id</td>
                    <td>jack@sparrow.com</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="span8">
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>Order no</th>
                    <th>Order Date</th>
                    <th>Quantity</th>
                    <th>Total</th>
                    <th>View order</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>1</td>
                    <td>TB - Monthly</td>
                    <td>01/04/2012</td>
                    <td>Approved</td>
                    <td>View Order</td>
                </tr>
                <tr class="error">
                    <td>2</td>
                    <td>TB - Monthly</td>
                    <td>02/04/2012</td>
                    <td>Declined</td>
                </tr>
                <tr class="warning">
                    <td>3</td>
                    <td>TB - Monthly</td>
                    <td>03/04/2012</td>
                    <td>Pending</td>
                </tr>
                <tr class="info">
                    <td>4</td>
                    <td>TB - Monthly</td>
                    <td>04/04/2012</td>
                    <td>Call in to confirm</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>