Question

我有多行，最大断点有3列，中点有2列，小点有1列。但是在中间断点处，第三列显示在其自己的行中。如何获得一种包装效果，以使第一行的第三列和第二行的第一列在中等断点处并排出现？它与flexbox有关吗？我不太了解flexbox。这是我的代码：

<div class="container">
 <div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">one</div>
  <div class="col-xs-12 col-md-6 col-lg-3">two</div>
  <div class="col-xs-12 col-md-6 col-lg-3">three</div>
 </div>
 <div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">one</div>
  <div class="col-xs-12 col-md-6 col-lg-3">two</div>
  <div class="col-xs-12 col-md-6 col-lg-3">three</div>
 </div>
</div>

所以我希望它看起来像这样：

大：
一二三
一二三

中：
一二
三个一个
两个三个

小：
一个
两个
三个
一个
两个
三个

我的问题是中等断点

Answer 1

Bootstrap中的网格布局总计为12。由于您有3个div，请尝试：static public class PnGiaoDich extends JPanel { public PnGiaoDich() { setBackground(Color.WHITE); //layout setLayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); //create table String[] columnNames = {"Ngày giao dịch", "Loại gio dịch | Mô tả", "Tình trạng", "Số tiền" }; Object[][] data = { {"", "", "", ""}, {"", "", "", ""}, {"", "", "", ""}, {"", "", "", ""} }; JTable table = new JTable(data, columnNames); table.getColumnModel().getColumn(0).setPreferredWidth(150); table.getColumnModel().getColumn(1).setPreferredWidth(525); table.getColumnModel().getColumn(2).setPreferredWidth(150); table.getColumnModel().getColumn(3).setPreferredWidth(150); //Add panel to JScrollPane table.setBorder(BorderFactory.createLineBorder(Color.RED)); JScrollPane scrollpn = new JScrollPane(table); //table.setFillsViewportHeight(true); c.gridx = 0; c.gridy = 1; c.insets = new Insets(20, 20, 20, 20); c.weightx = 1; c.weighty = 1; c.anchor = GridBagConstraints.NORTH; add(scrollpn, c); } }代替col-md-4

https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

请尝试以下代码。

<div class="container">
<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-4">one</div>
  <div class="col-xs-12 col-md-6 col-lg-4">two</div>
  <div class="col-xs-12 col-md-6 col-lg-4">three</div>     
  <div class="col-xs-12 col-md-6 col-lg-4">one</div>
  <div class="col-xs-12 col-md-6 col-lg-4">two</div>
  <div class="col-xs-12 col-md-6 col-lg-4">three</div>
 </div>
</div>

Answer 3

Read the docs。 Bootstrap 4中没有\1 : $0。

将所有列保留在一个-xs中。
在lg上使用.row 3列。
没有理由使用col-lg-4，因为它暗示在xs屏幕上。

col-12

https://www.codeply.com/go/quk8RRLANG

bootstrap4大3列，中2列，小1列

3 个答案: