Question

这对您来说可能是一个简单的解决方法。在Bootstrap 4中，我使用align-self-center和mx-auto将h4和这些网格中的内容垂直居中，并且工作正常，但是对齐方式也改变了网格的高度，并且停止将背景色完全应用到网格。这将由CMS生成，我需要在黄色周围保留白色填充。这是我的HTML：

<div class="container widget4-wrapper h-100">
    <div class="row widget4 align-items-center h-100">
      <div class="col-sm-4 your-checklist mx-auto">
        <h3>Checklist header</h3>
      </div>
      <div class="col-sm-8 checklist mx-auto">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat consequat mauris nunc congue nisi. Purus sit amet volutpat consequat mauris nunc congue. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Libero id faucibus nisl tincidunt eget nullam non. Consequat semper viverra nam libero justo laoreet sit. Mattis enim ut tellus elementum sagittis vitae. Morbi enim nunc faucibus a pellentesque sit amet. Viverra aliquet eget sit amet tellus cras. Sed vulputate odio ut enim blandit. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Nulla facilisi nullam vehicula ipsum a. In aliquam sem fringilla ut morbi tincidunt augue. Sagittis eu volutpat odio facilisis mauris sit amet. Quis risus sed vulputate odio ut.</p>
      </div>
    </div>
</div>

这是我的CSS：

body { background-color: #182B54 }
.widget4 {
    padding: 25px 25px 0;
    background-color: #fff;
}
.widget4 .your-checklist,
.widget4 .checklist { background-color: #FED007 }

现在

还有 this is how it looks

我要使它看起来像此屏幕截图：

Answer 1

我认为您只需要这个CSS：

public class NumberPad extends    JPanel
{
    private ActionListener listener;
    /**
     * Default Constructor
     */
    public NumberPad(ActionListener listener)
    {
        super();
        // Store as private attribute here
        this.listener = listener;
        setupLayout();
    }

    /**
     * Setup and layout this NumberPad
     */
    private void setupLayout()
    {
        // Setup and layout this NumberPad
        GridLayout pinpad = new GridLayout (4, 3);
        setLayout(pinpad);
        addButton("1");
        addButton("2");
        addButton("3");
        addButton("4");
        addButton("5");
        addButton("6");
        addButton("7");
        addButton("8");
        addButton("9");
        addButton("Del");
        addButton("0");
        addButton("C");
    }
    
    private void addButton(String anyString)
    {
        JButton anyButton = new JButton(anyString);
        add(anyButton);
        // You can use `this.listener` to access the stored private attribute
    }
    
}

使它看起来像您的屏幕截图。

Answer 2

以下简单的CSS更改将完全复制您提供的屏幕截图：

.widget4 {
    padding: 10px 10px;
    background-color: #FED007;
    border: 20px white solid;
    border-bottom: none; 
 }

Answer 3

修改后的html和css在下面。修改过的行通过注释签名------已更改！------ 祝你好运！

<div class="container widget4-wrapper h-100">
    <div class="inner-wrapper">   <!-- --------------------changed!---------------- -->
        <div class="row widget4 align-items-center h-100">
            <div class="col-sm-4 your-checklist mx-auto">
                <h3>Checklist header</h3>
            </div>
            <div class="col-sm-8 checklist mx-auto">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Volutpat consequat 
                mauris nunc congue nisi. Purus sit amet volutpat consequat mauris nunc 
                congue. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. 
                Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. 
                Libero id faucibus nisl tincidunt eget nullam non. Consequat semper 
                viverra nam libero justo laoreet sit. Mattis enim ut tellus elementum 
                sagittis vitae. Morbi enim nunc faucibus a pellentesque sit amet. Viverra 
                aliquet eget sit amet tellus cras. Sed vulputate odio ut enim blandit. 
                Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Nulla 
                facilisi nullam vehicula ipsum a. In aliquam sem fringilla ut morbi 
                tincidunt augue. Sagittis eu volutpat odio facilisis mauris sit amet. Quis 
                risus sed vulputate odio ut.</p>
            </div>
        </div>     <!-- --------------changed---------------- -->
    </div>
</div>

body { background-color: #182B54 }
.inner-wrapper {   /* -------------changed!------------ */
  padding: 25px 25px 0;   /* -------------changed!------------ */
  background-color: #fff;   /* -------------changed!------------ */
}   /* -------------changed!------------ */
.widget4 {
    background-color: #FED007;   /* -------------changed!------------ */
}
.widget4 .your-checklist,
.widget4 .checklist { background-color: #FED007 }

垂直对齐和背景色问题

3 个答案: