Bootstrap 如何使图标和文字向左浮动？

lskq00tm 于 2023-05-21 发布在 Bootstrap

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

我的目标是使用Bootstrap的列表组来创建一个像这样的导航栏：

我在想怎么才能把它们移到左边。这是我尝试过的。

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 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>

更新

我试着设置图标的最小宽度，但它在我这边不起作用，因为我意识到我没有很好地演示整个问题...这个列表组在我的网格的一列中。对不起！
以下是我的完整代码：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Explore</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 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"><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>
      </div>
      <!-- Center column -->
      <div class="col">
        Column
      </div>
      <!-- Right column -->
      <div class="col">
        Column
      </div>
    </div>
  </div>

</body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76281429/how-to-make-the-icon-and-text-float-to-the-left

2条答案

按热度按时间

dzhpxtsq1#

你可以简单地给予图标一个最小宽度，这样它们就都一样了，然后把它们居中对齐。然后文本堆叠得很好。
Flexbox并不真正工作，因为它是一维的。它不便于行之间的对齐。

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 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>

赞(0）回复(0）举报 2023-05-21

waxmsbnn2#

我猜你想按照你的代码在col中将导航栏向左对齐。如果是这样，下面是解决方案

.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" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 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>

赞(0）回复(0）举报 2023-05-21

我来回答

Bootstrap 如何使图标和文字向左浮动？

2条答案

相关问题

热门标签

最新问答