Question

我想使用Bootstrap 4创建一个类似于this page的网格系统。我想在col-sm-4中创建一个方框，在col-sm-8中创建一个较长的矩形。同样的高度。我在创建响应方框时遇到了麻烦。我怎么能这样做？！

当前代码：

public ATMgui1() {

    setTitle("ATM Transactions");
    setSize(WIDTH, HEIGHT);
    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

    JPanel contentPane = new JPanel();

    contentPane.setBackground(Color.PINK);
    setContentPane(contentPane);

    JLabel pinLabel = new JLabel("Enter your Pin:");
    // pinLabel.setOpaque(false);
    pinTextField = new JTextField();
    JButton pinButton = new JButton("EnterPin OK");
    // pinButton.setOpaque(false);

    JLabel pinChangeLabel = new JLabel("Enter your new Pin:");
    JTextField pinChangeTextField = new JTextField();
    JButton pinChangeButton = new JButton("Change Pin");

    JButton exitButton = new JButton("EXIT");
    exitButton.addActionListener(e -> this.dispose());

    pinButton.addActionListener(this);

    JPanel pinPanel = new JPanel();
    pinPanel.setOpaque(false); // !!
    pinPanel.setLayout(new GridLayout(3, 3));
    pinPanel.add(pinLabel);
    pinPanel.add(pinTextField);
    pinPanel.add(pinButton);
    pinPanel.add(pinChangeLabel);
    pinPanel.add(pinChangeTextField);
    pinPanel.add(pinChangeButton);

    pinPanel.add(exitButton);

    contentPane.add(pinPanel, BorderLayout.CENTER);
}

我尝试的事情：

Using jQuery to set the height。这不适用于div上的填充，并且没有响应。
This link我设法得到一个方形框，旁边有一个矩形，但是一旦添加了文字，它就不再是正方形。

Answer 1

最终，伪元素可以提供帮助：

.col-sm-4:before,
.col-sm-8:before {
  content: '';
  width: 0;
}

.col-sm-4:before,
.col-sm-8:before,
.ib {
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.col-sm-4:before {
  padding-top: 100%;
  /* makes expand to a square */
}

.col-sm-8:before {
  padding-top: 50%;
  /* makes a rectangle half the height of a square */
}

[class^="col"] {
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 5px white;
  padding: 0;
  text-align: center;
  background: url(http://lorempixel.com/400/200) tomato;
  background-size: cover;
}

.row {
  color: white;
  text-shadow: 0 0 black, 0 0 2px black;
}

.col-sm-4 {
  background: gray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row section-box">
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
    <div class="col-sm-8 description-image p-0">
      second rectangle box.
    </div>
  </div>
  <div class="row section-box">
    <div class="col-sm-8 description-image p-0">
      <div class="ib">second<br> rectangle box.</div>
    </div>
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
  </div>
</div>

Answer 2

您可以使用bootstrap 4 embed-responsive类，并且已经完成

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <div class="row m-5">
        <div class="col-1">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-1</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-2">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-2</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-3">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-3</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-4">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-4</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-5">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-5</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-6">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-6</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-7">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-7</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-8">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-8</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-9">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-9</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-10">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-10</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-11">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-11</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-12">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-12</div>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

方形响应div使用Bootstrap 4

2 个答案: