Question

我构建了一个包含3行的网格，以及下一个配置。

在第一个，3列，

在第二个，2列，

在最后一栏中，列：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><asp:button /></div>
</div>

问题是每一行的结尾（我的意思是，最后一列）与其他行没有对齐...我尝试在每一行中设置特定的边距或/和填充。但问题仍然存在，因为当我改变屏幕的大小时，又会出现混乱。

这个问题有优雅或有效的解决方案吗？

感谢队友。

注意：给你所有额外的信息，希望你们都能理解我的问题。在每一栏的内部我都有不同数量的元素（比如asp：button，asp：label等等......）。我正在使用bootstrap 3.如果您需要任何类型的信息，请告诉我...干杯。

Answer 1

如果我理解正确的话，我认为你试图让2列的行让最后一列与3行中的最后一列对齐？如果这是真的，那么您需要使用偏移并使列具有相同的大小。

这是你在找什么？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-xs-4 bg-primary">Row 1 Col 1</div>
  <div class="col-xs-4 bg-info">Row 1 Col 2</div>
  <div class="col-xs-4 bg-danger">Row 1 Col 3</div>
</div>
<div class="row">
  <div class="col-xs-6 bg-success">Row 2 Col 1</div>
  <div class="col-xs-6 bg-warning">Row 2 Col 2</div>
</div>
<div class="row">
  <div class="col-xs-12 bg-danger">Row 3 Col 3</div>
</div>
</div>

此外，您没有在行

上正确关闭div标签

使用具有不同列数的行时，列放错了位置

1 个答案: