如何在HTML和CSS中制作5列的一行

我試圖讓 1 行和 5 列彼此相鄰。這 5 列將用于我想在我的在線投資組合中顯示的專案。我正在使用 Bootstrap 框架來構建這個網站

請看下面的代碼：

HTML

    <div class = "container-md">
      <h1>Projects</h1>
      </div>
      <div class = "container-md-grid">
        <div class = "row">
          <div class = "col-md-4">Dodge Game</div>
          <div class = "col-md-4">Landing Page</div>
          <div class = "col-md-4">API data source tracker</div>
          <div class = "col-md-4">Calculator</div>
          <div class = "col-md-4">JavaScript Quiz</div>
      </div>

  </body>
</html>

CSS

.container-md
{
 background-color: #2A3956;
 box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
 border: 1px solid #02d3f6;
}

.container-md h1
{
  color:#07DD45;
  margin-top: 3%;
  font-size:20px;
  margin-left: 41%;
}

.container-md-grid
{
  background-color:#07DD45;
  margin-right:278px;
  padding-bottom: 300px;
  display: grid;
}

.row align-items-start
{
  margin-left:10px;
}
.col-md-4
{
  position: absolute;
  transform: rotate(300deg);
  margin-top: 139px;
  margin-left: -15px;
}

uj5u.com熱心網友回復：

.html檔案：

       <link       
         href="https://cdn.jsdelivr.net/npm/[email protected]/
         dist/css/bootstrap.min.css" 
         rel="stylesheet"/>
        <div class="container">
            <div class="row" style="border: 1px solid red">
              <div class="col-xs-2" id="p1">Dodge Game</div>
              <div class="col-xs-2 col-half-offset" id="p2">Landing 
               Page</div>
              <div class="col-xs-2 col-half-offset" id="p3">API data source 
               tracker</div>
              <div class="col-xs-2 col-half-offset" id="p4">Calculator</div>
              <div class="col-xs-2 col-half-offset" id="p5">JavaScript 
               Quiz</div>
              <div>lorem</div>
            </div>
        </div>

.css檔案：

    .col-xs-2{
        background:#00f;
        color:#FFF;
    }
    .col-half-offset{
        margin-left:4.166666667%
    }

uj5u.com熱心網友回復：

為了制作 5 列，我將列類更改為col并更改了一些 css。
你可以在這里看到它的實際效果。

<div class="container-md">
  <h1>Projects</h1>
</div>
<div class="container-md-grid">
  <div class="row">
    <div class="col">Dodge Game</div>
    <div class="col">Landing Page</div>
    <div class="col">API data source tracker</div>
    <div class="col">Calculator</div>
    <div class="col">JavaScript Quiz</div>
  </div>
</div>

.container-md {
  background-color: #2a3956;
  box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
  border: 1px solid #02d3f6;
}

.container-md h1 {
  color: #07dd45;
  margin-top: 3%;
  font-size: 20px;
  text-align: center;
}

.container-md-grid {
  background-color: #07dd45;
  margin-right: 278px;
  padding-bottom: 300px;
  display: grid;
}

.row align-items-start {
  margin-left: 10px;
}
.col {
  transform: rotate(300deg);
  margin-top: 139px;
  margin-left: -15px;
}

標籤：html css bootstrap-4 多列

上一篇：為什么這個頁腳元素在它有固定位置時就消失了？[復制]

下一篇：如何將HTML音頻元素縮小到表格單元格中？