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

问题描述 投票：0回答：2

我正在学习 Bootstrap，我想从头开始制作一个主题，但现在在开始时我遇到了一个奇怪的问题——图标贴在页面右侧的徽标上，但是

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

html css twitter-bootstrap bootstrap-4 css-float
2个回答
0
投票

我找到了解决方案：

  1. 内部容器 div 我添加了一个
    row
    div.
  2. 在
    row
    里面创建了一个
    d-flex justify-content-between
    .
  3. 第一个元素（带有徽标的 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/[email protected]/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
投票

Bootstrap 行是 flex 元素，所以 

justify-content-between
flex 布局类 将两个 flex 子级展开到两侧。 了解更多关于 flexbox.

不要使用花车。它们是一种过时的布局技术，在 2023 年几乎没有合法用途。

还可以考虑使用 Bootstrap 的 margin classes 而不是编写自己的 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/[email protected]/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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.