css - 如何安排按钮来填充利润？

Question

我正在尝试使用 Bootstrap 4 创建一个支出板。 现在这就是我所做的，我希望按钮显示如下图所示。 我不知道该怎么做..

我现在得到的:

我最终想得到的是:

.btn-warning {
  border: 1px solid black;
  height: 85px;
}

.middel {
  background-color: #ff00008a;
  border: 4px solid black;
  height: 270px;
  border-radius: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" style="border: 1px solid black">
  <div class="row">
    <div class="col-6" style="border: 1px solid black;height: 85px;"> בוצע על ידי
      <select class="form-control">
        <option> moshe </option>
        <option> haim </option>
        <option> kobi </option>
      </select>
    </div>
    <div class="col-6" style="border: 1px solid black; height: 85px;"> באמצעות
      <select class="form-control">
        <option> moshe </option>
        <option> haim </option>
        <option> kobi </option>
      </select>
    </div>
  </div>
  <div class="row">
    <button class="col-3 btn btn-warning"> אוכל לבית </button>
    <button class="col-3 btn btn-warning"> בילוים </button>
    <button class="col-3 btn btn-warning"> אינטרנט חשמל וכבלים </button>
    <button class="col-3 btn btn-warning"> ארנונה </button>
    <button class="col-3 btn btn-warning"> ארנונה </button>
    <button class="col-6 middel">
                <h2>expense</h2>
                <div style="font-size: 120%; color: red"> <b>1900</b></div>
                <div style="font-size: 75%; color: green"><b> 3500</b></div>
            </button>
    <button class="col-3 btn btn-warning"> חשבונות בית </button>
    <button class="col-3 btn btn-warning"> הוצאות רפואיות </button><button class="col-3 btn btn-warning">
                חשבונות בית </button>
    <button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
    <button class="col-3 btn btn-warning"> חשבונות בית </button>
    <button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
    <button class="col-3 btn btn-warning"> חשבונות בית </button>
    <button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
    <button class="col-3 btn btn-warning"> חשבונות בית </button>
  </div>
  <div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
    <div class="col-4">
      בחר את תאריך ביצוע הפעולה :
    </div>
    <div class="col-8">
      <input class="form-control" type="date">
    </div>
  </div>
  <div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
    <input class="col-12" type="text" placeholder="תאר את ההוצאה (לא חובה)">
  </div>
  <div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
    <button class="btn btn-dark col-12"> הוסף </button>
  </div>
</div>

在@connexo 回答后附上照片:

Answer 1

考虑使用 CSS 网格。请注意，您的 HTML 实际上无效。 button 不能包含 h2 和 div，只能包含非交互式 phrasing content .

body {
  margin: 0;
}

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 2px;
}

.grid button {
  background-color: orange;
}

.grid .centercell {
  background-color: lime;
  grid-row: 2/5;
  grid-column: 2/4;
  border-radius: 50%;
}

<div class="grid">
  <button> אוכל לבית </button>
  <button> בילוים </button>
  <button> אינטרנט חשמל וכבלים </button>
  <button> ארנונה </button>
  <button> ארנונה </button>
  <button class="centercell">
    <span>expense</span>
    <span style="font-size: 120%; color: red"> <b>1900</b></span>
    <span style="font-size: 75%; color: green"><b> 3500</b></span>
  </button>
  <button> חשבונות בית </button>
  <button> הוצאות רפואיות </button><button>
  חשבונות בית </button>
  <button> הוצאות רפואיות </button>
  <button> חשבונות בית </button>
  <button> הוצאות רפואיות </button>
  <button> חשבונות בית </button>
  <button> הוצאות רפואיות </button>
  <button> חשבונות בית </button>
</div>