如何让我的 header 元素正确排成一行？

Question

我已经为整个页面指定了背景图片。除此之外，我想要一个 header，具有纯色背景，左侧是我的徽标，中间是公司名称，右侧是我的名字。

在此下方，我希望我的网站主页有 3 个栏，如果可能的话，每个栏可能都有自己的背景颜色。

我正在尝试使用 bootstrap 为我的 header 提供三个部分 (logo-text-name)，我希望文本居中。

我有这么多填充的原因是徽标一直挂在 header 的底部。

现在我确定我做错了很多，但如果有人能提供帮助，我将永远感激不已。谢谢

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 30px 10px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
  float: left;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
        </div>

        <div class="col-xs-8">
          <h1>Cakes 'n' Bakes</h1>
        </div>

        <div class="col-xs-2">
          <p>my name</p>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

Answer 1

我对您的代码进行了一些更改并添加了一些内容，希望能帮到您！

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 0px 0px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
}

#top-part-1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col-xs-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-xs-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-2 {
  padding: 20px 10px 0px 0px;
  color: #000000;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#top-part-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <div class="container" id="top-part-1">
    <div class="col-xs-2">
      <img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
    </div>

    <div class="col-xs-8">
      <h1>Cakes 'n' Bakes</h1>
    </div>

    <div class="col-xs-2">
      <p>my name</p>
    </div>
  </div>
</header>

<div class="header-2">
  <div class="container" id="top-part-2">
    <div class="col-xs-2">
      <h2> col 1 </h2>
    </div>
    <div class="col-xs-8">
      <h2> col 2 </h2>
    </div>
    <div class="col-xs-2">
      <h2> col 3 </h2>
    </div>
  </div>
</div>

Answer 2

Bootstrap 5 确实将 flexbox 带到了 table，所以我会使用它而不是与列搏斗，因为不灵活可能会很麻烦。

在这里，我用一个简单的弹性行替换了您的容器、行和列。横轴上的项目对齐使事情居中。中心元素上有 Bootstrap 的 flex-fill class 以使其伸展。

另请注意，我已将您的自定义边距和填充替换为 Bootstrap spacing classes 收拾东西。

body {
  background-image: url(https://via.placeholder.com/1200);
}

header {
  background-color: #539e8a;
  color: #f6c5be;
  border-radius: 25px;
}

#logo {
  width: 160px;
  height: 140px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header class="mt-3">
    <div class="d-flex align-items-center">
      <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">

      <div class="flex-fill text-center">
        <h1>Cakes 'n' Bakes</h1>
      </div>

      <div class="px-3">
        <p>My Name</p>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

如何让我的 header 元素正确排成一行？

How can I get my header elements to line up in a row properly?

html

css

php

twitter-bootstrap