Question

我有一个包含6列的表格。我想把第一个拉到左边，最后一个拉到右边。我希望他们从双方堆叠起来，具体取决于他们内容的大小。我的意思是，如果例如最后两个没有内容，他们都应该坚持到右边界。但是如果最后一个具有需要显示x像素的内容，则第5个应该从右边界开始向左移动x个像素。

我尝试在我的td标签上添加拉右和左拉类，并且它在位置方面效果很好，但它使我的行之间的边界消失了，我想通过那个空白区域留在列之间。在行中，任何列中都没有包含空格。

我正在寻找一种干净的方法来进行这种设计，因为这看起来并不合适。它还需要响应。提前感谢您分享您的想法！

编辑：这是我的代码，它在erb中，所以只关注类，并且没有任何与自定义类相关的单独CSS，它只是自举：

＆＃13;

Control Panel\Clock, Language, and Region

＆＃13;

Answer 1

我最终将所有需要在右侧拉到右侧的列合并，并动态生成其内容。多亏了这一点，我左边有两列，总是填充，右边有一列是动态填充的，由于flex属性，它占用了所需的空间。我在行中添加了style="display: flex; flex-direction: row;"，在右栏中添加了style="text-align: right; flex: 1;"。这样，内容就会叠加在右侧。

见：

＆＃13;

<tr style="display: flex; flex-direction: row;" class="cards-row-clickable" data-link='<%= edit_card_path(card) %>' data-params="<%= params[:page_completed] %>@!<%= params[:page_not_completed] %>">
                  <td class="checkbox-column">
                    <%= form_for card, :html => {:class => "checkbox_completed_card"}, remote: true do |f| %>
                        <%= f.check_box :is_completed %>
                    <% end %>
                  </td>
                  <td class="title-column" style="overflow: hidden;"><%= card.title %></td>
                  <td class="info-column" style="text-align: right; flex: 1;">
                    <% if !card.due_at.blank? %>
                        <span style="color:red;"><%= card.due_at %> </span>
                    <% end %>
                    <span>Creator : <%= card.user.email %></span>

                    <% if !card.assignee_id.blank? %>
                        <span>, assignee : <%= User.find(card.assignee_id).email.slice(0..(User.find(card.assignee_id).email.index('@')-1)) %></span>
                    <% end %>

                    <%= link_to card, method: :delete, data: {confirm: 'Are you sure?', params: {page_completed: params[:page_completed].to_param, page_not_completed: params[:page_not_completed].to_param}}, remote: true do %>
                        <span class="glyphicon glyphicon-trash"></span>
                    <% end %>
                  </td>
                </tr>

＆＃13;

Bootstrap表动态移动列

1 个答案: