logo标签列表

Bootstrap 4 alpha 中如何实现全宽度导航选项卡

htmlcsstwitter-bootstrap
3

你好，我该如何使我的导航选项卡铺满整个宽度？我已经尝试使用width:100%;但没有成功。

enter image description here

这是我使用的HTML代码。

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

需要更多的代码或有效的示例。 - LIJIN SAMUEL
那就是准确的代码。我尝试了.nav-tabs{text-align:center}，但它不起作用，所以我没有包括它。还有其他方法。 - jmv
3个回答
11

有内置的CSS类可实现此目的。来自官方文档：

使用.nav-fill可按比例填充所有可用空间与您的.nav-items。请注意，所有水平空间都被占用，但并非每个导航项具有相同的宽度。

<ul class="nav nav-tabs nav-fill" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

输入图片描述

对于等宽元素，请使用.nav-justified。导航链接将占用所有水平空间，但与上面的.nav-fill不同的是，每个导航项的宽度都相同。

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

在这里输入图像描述

5
根据我的理解，您希望将<ul class="nav nav-tabs">的宽度设置为width:100%，是吗？但是，默认情况下<ul class="nav nav-tabs">已经是width: 100%，所以您不需要给<ul>添加css。但是，如果您想将<li class="nav-item">的宽度设置为width: 100%，则可以像这样添加css：
  .nav-item {
     width:100%;
   }

否则，将 text-align: center 替换为 <ul class="nav justify-content-center">，并添加到您的 html 中。
3
这可能会有帮助。你不需要给ul添加CSS。 

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h3>Tabs</h3>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
    <br>
    <p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)</p>
  </div>

  <h2>Basic Nav-tabs</h2>

  <div class="container">
    <h3>Inline List</h3>
    <ul class="list-inline">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接