引导表单中的按钮在小屏幕上溢出 div答案

【问题标题】：Button in bootstrap form overflows div on small screens引导表单中的按钮在小屏幕上溢出 div
【发布时间】：2021-10-21 15:11:04
【问题描述】：

按钮延伸到中小型 (576-768) 屏幕之间的 div 之外。不知道为什么。

 <div class="container">
      <div class="row freebie">
        <div class="col-sm-6 pic42">
          <img src="./Resources/images/42_questions.png" class="imgfree" alt="Responsive image">
        </div>
        <div class="col-sm-6">
          <form>
            <div class="mb-3">
              <label for="name" class="form-label">Your name</label>
              <input type="name" class="form-control" id="ame" aria-describedby="name">
              <div id="name" class="form-text">We'll never share your email with anyone else.
              </div>
            </div>
            <div class="mb-3">
              <label for="email" class="form-label">Your email</label>
              <input type="email" class="form-control" id="email">
            </div>
            <div class="mb-3">
            <button type="submit" class="btn btn-primary mb-2 m-2 ">Send my cheatsheet</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

没有特定于表单的 CSS。

【问题讨论】：

您能否附上一个屏幕截图来说明您遇到的问题？从您的代码 sn-p 中，我没有看到任何明显的溢出。此外，您的代码中引用的图像无法公开访问，因此结果是图像损坏。您可能想尝试在示例中将其替换为可公开访问的 URL。
我刚收到一条消息，说我无法添加图像，因为我是 Stackoverflow 的新手，所以它正在发送链接。我希望这是有帮助的。试图重做消息，但在这里看不到。所以我在这里添加链接127.0.0.1:5500/indexhst.html。您可以使用开发工具来演示响应性问题。谢谢。
谢谢亚伦。如果最后一条消息不清楚，请道歉。 Stackoverflow 阻止了编辑。希望该链接将演示该问题。另外 - 图像在我的电脑上。我将通过 Netlify 从 github 启动，这样它就可以从那里工作。我会给你一个 Github 的链接，但由于新的安全措施，我目前无法推送。

标签： html bootstrap-4

【解决方案1】：

该按钮 div 上的属性 style="overflow: hidden" 应该可以工作，希望对您有所帮助。

【讨论】：

谢谢肯尼。我只是试了一下没有成功。太奇怪了——我可以操纵那个按钮来做很多事情，但不是那样。我也无法居中，但我不会担心这个:)。
我运行了您的代码，就中心部分而言，您可以在该按钮 div 中添加一些填充，我发现了一些可能有助于您解决其他问题的东西，我在这里找到了它，所以我我张贴链接以防万一它可以工作，这样他们就可以获得信用....stackoverflow.com/a/41250173/16709692 .....我用这样的按钮 div 运行了代码，它似乎工作正常，但你可以玩填充并根据需要获取它.....

祝你好运
嗨，肯尼，再次感谢。尝试了所有这些，但对任何事情都没有任何影响。我确实认为这一定与引导程序的类有关，因为它只是在这么短的空间中很奇怪。明天我会再看一遍 - 现在完全没有耐心了。
好吧，不用担心你会把它挂在那里。