Bootstrap：如何在文本区域和按钮之间放置换行符？答案

【问题标题】：Bootstrap: How can I put a line break between the textarea and button?Bootstrap：如何在文本区域和按钮之间放置换行符？
【发布时间】：2018-12-11 06:20:27
【问题描述】：

这是引导页面

<div id="cover-caption">
<div id="container" class="container-fluid">
<div class="row d-flex">
<div class="col-lg-10 offset-sm-1 text-center"><br>
<h1 class ="font-weight-bold">Classes</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<input type="text" class="form-control" placeholder="Class Name">
</div><br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title">
</div><br>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Notes"></textarea>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<br>
</div>
</div>
</div>
</div>
</div>

这是我的 CSS：

#cover {
  background: #222 url('') center center no-repeat;
  background-size: cover;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
 }

 #cover-caption {
 width: 100%;
 }

我想在 textarea 和 button 之间放置一个换行符，而 <br> 不起作用。谁能解释一下原因并帮我解决它

【问题讨论】：

我工作，jsfiddle.net/MatrixTai/d8ymL17g，你需要提供更多代码。
@MatrixTai ok.. 这个好吗？
...您需要使问题可重现，在询问html相关问题时，使用stackoverflow提供的sn-p或我提供的jsfiddle喜欢的网站很方便。确实，您的问题可能来自您没有提供的 CSS，请尝试使用这些工具制作示例，否则没有人可以提供帮助。

标签： html forms bootstrap-4

【解决方案1】：

您在寻找<hr> 吗？或者干脆<br><br>？

或者您可以将style="padding-top: 10px;" 放在按钮上...

祝你有美好的一天。

编辑：

从表单标签中移除 form-inline 类，替换为 span（您需要修复居中问题）：

<div id="cover-caption">
        <div id="container" class="container-fluid">
            <div class="row d-flex">
                <div class="col-lg-10 offset-sm-1 text-center">
                    <br>
                    <h1 class="font-weight-bold">Classes</h1>
                    <div class="info-form">
                        <form action="">
                            <span class="form-inline justify-content-center">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Class Name">
                                </div>
                                <br>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Title">
                                </div>
                                <br>
                                <div class="form-group">
                                    <textarea type="text" class="form-control" placeholder="Notes"></textarea>
                                </div>
                            </span>
                            <button type="submit" class="btn btn-warning">Submit</button>
                        </form>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

谢谢，我试试
一切都好，再次编辑我的答案以解决居中问题（将 justify-content-center 移到 span 中）。祝你有美好的一天！

【解决方案2】：

我终于明白你的问题了。

您正在让引导 CSS 表单覆盖您的按钮。您无需更改任何内容，只需将按钮放在表单外即可。

<form action="" class="form-inline justify-content-center">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Class Name">
  </div><br>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Title">
  </div><br>
  <div class="form-group">
    <textarea type="text" class="form-control" placeholder="Notes"></textarea>
  </div>
</form>
<button type="submit" class="btn btn-warning">Submit</button>

【讨论】：

希望我能接受这两个答案，因为它们都有效
@KuldeepChoudhary 可以在html中使用form=""标志，也可以使用js提交。
@MT-FreeHK 是的，这是可能的 - 但在表单外添加提交按钮仍然不是一个好习惯
@KuldeepChoudhary 为什么这不是一个好习惯，你能解释一下吗？
@MT-FreeHK 1. 如果没有 JS，这将无法工作（正常的表单提交将无法工作） 2. 如果我们通过 js 执行此操作 - 此表单输入框将不支持 onSubmit 事件 - 就像当您在任何输入框中单击 enter btn - 表单不会触发 onSubmit 事件 - 只需单击提交按钮。如果我们把这个 btn 放在里面 - 它在条目点击表单上将触发 onSubmit 事件 -