Bootstrap 为什么这个简单的引导代码不起作用

bwleehnv 于 2023-04-18 发布在 Bootstrap

关注(0)|答案(2)|浏览(149)

我正在学习Bootstrap，我想从sratch制作一个主题，但现在在入门点我遇到了一个奇怪的问题-图标粘在页面右侧的徽标上，但是float:left与!important声明必须将它们向左对齐，而它却没有这样做！
这是怎么回事？我如何正确地将图标对齐到左侧，将徽标对齐到右侧？

* {
  font-family: aviny;
  font-size: 22px;
  text-align: right;
  direction: rtl;
}

.top-header {
  margin-top: 20px;
}

.instagram-icon img {
  float: left !important;
  /* does not stick the icons to left side!!! */
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
  <div class="container top-header">
    <div class="row">
      <img src="https://via.placeholder.com/80" alt="logo header" width="80">
      
      <div class="instagram-icon">
        <img src="https://via.placeholder.com/50" alt="instagram">
        <img src="https://via.placeholder.com/50" alt="telegram">
        <img src="https://via.placeholder.com/50" alt="youtube">
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76008260/why-this-simple-bootstrap-code-does-not-work

2条答案

按热度按时间

yxyvkwin1#

引导行是flex元素，所以justify-content-between flex布局类将两个flex子元素分布到两侧。
不要使用浮动。它们是一种过时的布局技术，在2023年几乎没有合法的用途。
也可以考虑使用Bootstrap的margin类，而不是自己编写CSS。mt-3类可以获得两倍的默认间距单位（2 x 0.5rem = 1.0rem），接近20px。

* {
  font-family: aviny;
  font-size: 22px;
  text-align: right;
  direction: rtl;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
  <div class="container top-header mt-3">
    <div class="row justify-content-between">
      <img src="https://via.placeholder.com/80" alt="logo header" width="80">

      <div class="instagram-icon">
        <img src="https://via.placeholder.com/50" alt="instagram">
        <img src="https://via.placeholder.com/50" alt="telegram">
        <img src="https://via.placeholder.com/50" alt="youtube">
      </div>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-04-18

nwnhqdif2#

我找到了一个解决方案：
1.在容器div中，我添加了一个row div。
1.在row内部创建了一个d-flex justify-content-between。
1.第一个元素（带有徽标的img）将被放置在右侧，第二个元素（带有Instagram徽标的div等）将被放置在左侧，无需使用您的instagram-icon。
这就是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Academy</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container top-header">
      <div class="row">
        <div class="d-flex justify-content-between">
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/stackoverflow-2752065-2284882.png"
            alt="logo header"
          />
          <div class="instagram-icon">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb2CZZwLGcM5obAkkLvT9tEf8ptGxpJuRCYFVu4Ifjkw&s"
              alt="instagram"
            />
          </div>
        </div>
      </div>
    </div>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

在css上，总是尽量避免使用!important，不要使用float，总是尽量使用flex或grid来定位东西。
这是我使用的Stackblitz：https://stackblitz.com/edit/web-platform-tqdq6r?file=index.html

赞(0）回复(0）举报 2023-04-18

我来回答

Bootstrap 为什么这个简单的引导代码不起作用

2条答案

相关问题

热门标签

最新问答