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

Question

我试图让 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;
}

Answer 1

为了制作 5 列，我将列类更改为 col 并更改了一些 css。
你可以看到它的实际效果 here.

<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;
}

Answer 2

.html 文件:

       <link       
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/
         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%
    }

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

How to make one row with 5 Columns in HTML and CSS

html

css

multiple-columns

bootstrap-4