色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何讓圖標和文字向左浮動？

CSS
錢良釵2年前7瀏覽0評論

我的目標是使用Bootstrap的列表組來創建這樣的導航欄:

enter image description here

我在想我怎樣才能把它們移到左邊。以下是我嘗試過的。

.list-group-item {
  display: flex;
  align-items: center;
}

.list-group-item a {
  float: left;
}

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet"  integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="list-group">
  <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
  <a href="../home.html" class="list-group-item-action"><i class="fa-solid fa-house"></i>Home</a>
  <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bell"></i>Notifications</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-envelope"></i>Messages</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bookmark"></i>Bookmarks</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-user"></i>Profile</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-circle-minus"></i>More</a>
</div>

你可以簡單地給圖標一個最小寬度，這樣它們都是一樣的，并把它們居中對齊。那么文本就會很好地堆疊起來。

Flexbox實際上并不工作，因為它是一維的。這不利于行與行之間的對齊。

.list-group-item i {
  min-width: 30px;
  text-align: center;
}

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet"  integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="list-group">
  <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
  <a href="../home.html" class="list-group-item list-group-item-action"><i class="fa-solid fa-house"></i>Home</a>
  <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bell"></i>Notifications</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-envelope"></i>Messages</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bookmark"></i>Bookmarks</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-user"></i>Profile</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-circle-minus"></i>More</a>
</div>

我猜你想按照你的代碼將導航條在列中靠左對齊。如果是這樣，下面是解決方案

.list-group-item {
  display: flex;
  align-items: center;
}

.list-group-item i {
  margin-right: 0.5rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Explore</title>
  <link rel="stylesheet"  />
  <link  rel="stylesheet" />
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <!-- Left column -->
      <div class="col">
        <div class="list-group">
          <a class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fab fa-twitter mr-2"></i>Twitter</a>
          <a href="../home.html" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-house mr-2"></i>Home</a>
          <a href="../explore/index.css" class="list-group-item list-group-item-action active d-flex align-items-center" aria-current="true"><i class="fas fa-hashtag mr-2"></i>Explore</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-bell mr-2"></i>Notifications</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-envelope mr-2"></i>Messages</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-bookmark mr-2"></i>Bookmarks</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-list mr-2"></i>Lists</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-user mr-2"></i>Profile</a>
          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><i
                            class="fas fa-circle-minus mr-2"></i>More</a>
        </div>
      </div>
      <!-- Center column -->
      <div class="col">
        Column
      </div>
      <!-- Right column -->
      <div class="col">
        Column
      </div>
    </div>
  </div>
</body>

</html>