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

【问题标题】：How to make one row with 5 Columns in HTML and CSS如何在 HTML 和 CSS 中用 5 列制作一行
【发布时间】：2022-01-02 04:23:24
【问题描述】：

我正在尝试使 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;
}

【问题讨论】：

标签： html css bootstrap-4 multiple-columns

【解决方案1】：

.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%
    }

【讨论】：

【解决方案2】：

为了制作 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;
}

【讨论】：