Bootstrap元素显隐问题求助：小屏适配登录搜索栏与下拉菜单

Hey there! Totally get where you're coming from—sticking with your preferred button sizes while getting responsive behavior sorted makes total sense. The good news is you can absolutely solve this with Bootstrap 4 alone; no extra JavaScript is required if you set up the responsive classes correctly. Let’s break this down step by step:

1. 搞懂Bootstrap 4的响应式显示类逻辑 #

Bootstrap 4 uses breakpoint-based classes to control visibility. Here’s the key for your case:

• Hide elements on small screens (xs, <576px) but show on sm and larger: Use d-none d-sm-block
• Show elements only on small screens: Use d-block d-sm-none

Your earlier attempt might have mixed up the class order or used the wrong breakpoints—this is the most common pitfall!

2. 实现代码示例 #

Here’s how to structure your elements to get the behavior you want, while keeping your custom button sizes:

<!-- 搜索栏 + 登录/注册按钮：仅在平板/桌面可见 -->
<div class="d-none d-sm-block mb-2">
  <!-- 保持你喜欢的搜索栏样式，这里用inline-block避免占满宽度 -->
  <input type="text" class="form-control" placeholder="搜索内容..." style="width: 220px; display: inline-block;">
  <!-- 你的自定义按钮样式，不用改Bootstrap默认 -->
  <button class="btn btn-primary ml-3">登录</button>
  <button class="btn btn-success ml-2">注册</button>
</div>

<!-- 小屏专属下拉菜单：仅在手机可见 -->
<div class="d-block d-sm-none">
  <div class="dropdown">
    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="mobileNavDropdown" 
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="mobileNavDropdown">
      <a class="dropdown-item" href="#">登录</a>
      <a class="dropdown-item" href="#">注册</a>
    </div>
  </div>
</div>

3. 关键注意事项 #

• Don’t forget Bootstrap JS: The dropdown menu relies on Bootstrap’s JavaScript components, so make sure you have these scripts loaded at the bottom of your page:

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  

• Custom styles stay intact: You can keep your existing button sizes and search bar styling—just add inline styles or custom CSS classes like you normally would; Bootstrap’s responsive classes won’t override your custom sizing.

4. 为什么你的最初尝试失败了？ #

Chances are you either:

• Used the wrong breakpoint (e.g., d-md-block instead of d-sm-block, which would hide elements on tablets too)
• Forgot to pair d-none with the larger-screen display class (without d-none, elements will show on all screens by default)

This setup should work perfectly for your needs—no need to ditch your preferred button styles or add extra JavaScript!

内容的提问来源于stack exchange，提问作者FredrikB