Bootstrap 我需要使标志消失在小设备

ssm49v7z 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(133)

我试图使用d-none和d-md-block在img标签，使徽标消失在小设备，但它不工作，所以我试图把它放在a标签，但它使标题也消失了，所以我如何修复它

<header>
        <nav id="header-nav" class="navbar navbar-dark">
            <div class="container-fluid">
                <div class="d-flex flex-row">
                    <a class="navbar-brand navbar" href="index.html"  class="d-none d-md-block">
                        <img src="images/19822_1_67_Thumb.png" alt="Logo image">
                        <div class="d-flex flex-column p-2 pt-0 pb-0">
                            <h1 class="mb-1">David Chu's China Bristo</h1>
                            <p class="mb-1"><span><img src="images/star-k-logo.png" alt="Kosher certification"></span>Kosher Certified</p>
                        </div>
                    </a>
                </div>
            </div>
        </nav>
    </header>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74296153/need-to-make-the-logo-disappear-in-the-small-devices

1条答案

按热度按时间

xesrikrc1#

在小提琴中重新创建这个，它就能按预期工作了。你是否包括了所需的css文件？
另外，请注意，您在导航栏链接上有两个class标签，并且将导航栏设置为一个标签。
https://jsfiddle.net/6gfqncyu/2/

<header>
  <nav id="header-nav" class="navbar navbar-dark">
    <div class="container-fluid">
      <div class="d-flex flex-row">
        <a class="navbar-brand navbar" href="index.html">
          <img width="50px" src="path/to/image.png" alt="Logo image" class="d-none d-md-block">
          <div class="d-flex flex-column p-2 pt-0 pb-0">
            <h1 class="mb-1">David Chu's China Bristo</h1>
            <p class="mb-1"><span><img src="images/star-k-logo.png" alt="Kosher certification"></span>Kosher Certified</p>
          </div>
        </a>
      </div>
    </div>
  </nav>
</header>

导航栏有点奇怪，我建议阅读文档，这可以做你想要的更正确的每一个文档：

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-none d-md-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 我需要使标志消失在小设备

1条答案

相关问题

热门标签

最新问答