Question

您好如何使我的导航标签全宽，我尝试使用width:100%;无效。

这里是我使用的html代码。

＆＃13;

<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>

＆＃13;

Answer 1

根据我的理解，您希望width:100%到<ul class="nav nav-tabs">对吗？但默认<ul class="nav nav-tabs">位于width: 100%，您无需向<ul>提供css，但如果您想width: 100%到<li class="nav-item">，请将css提供给{这个：

  .nav-item {
     width:100%;
   }

或代替text-align: center将<ul class="nav justify-content-center">提供给您的html。

Answer 2

有内置的css类来实现这一目标。来自官方docs：

按比例填充所有可用空间您的const wm_tlbtnShowClosedClicked = WM_USER + 100; TForm2 = class(TForm) ..... private procedure tlbtnShowClosedClicked(var Msg :TMessage); message wm_tlbtnShowClosedClicked; end procedure TForm2.tlbtnShowClosedClicked(var Msg: TMessage); begin btn1.Down := (btn1.Action as TAction).Checked; end;，请使用.nav-items。请注意，所有水平空间都是已占用，但并非每个导航项具有相同的宽度。

.nav-fill

对于等宽元素，请使用<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

Answer 3

它可能会有所帮助。 您不需要将css提供给ul 。

＆＃13;

<!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>

＆＃13;

bootstrap 4 alpha中的全宽导航选项卡

3 个答案: