Question

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="index.php"><span class="logo_main">test1</span>
      <span class="logo_sub d-none d-md-block ">test2</span>
      <span class="logo_main d-none d-md-block ">Test3</span></a>
  </nav>
</header>

现在，我正在使用bootstrap4进行网页设计。但是，有一个神秘的错误。我想将test2部分和test3部分放在test1和test2之后。但是开始新的一行。我该怎么办？

Answer 1

首先，请注意，您在.d-none和test2元素上拥有Test3类，这隐藏了它们的显示。我假设您将要删除它，因此在示例中已经这样做。

从这两个元素中仅删除.d-none会使所有三个元素彼此相邻显示，这听起来像您想要的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="index.php">
      <span class="logo_main">test1</span>
      <span class="logo_sub d-md-block ">test2</span>
      <span class="logo_main d-md-block ">Test3</span>
    </a>
  </nav>
</header>

如果实际上您想“ 创建”换行，以使test2位于 test1以下，只需使用{ {1}}个元素而不是<div>个元素：

<span>

还要注意，您的<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand logo" href="index.php"> <div class="logo_main">test1</div> <div class="logo_sub d-md-block ">test2</div> <div class="logo_main d-md-block ">Test3</div> </a> </nav> </header>标签在示例中包装了所有三个元素。这将导致所有三个元素都指向同一位置。如果希望它们指向不同的位置，则需要在每个元素后关闭标签，并为后续元素打开新的<a>标签。

Answer 2

尝试在测试3之后关闭test1类

HTML Bootstrap开始新的一行

2 个答案: