Question

这是引导页面

<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>不起作用。有人可以解释原因并帮助我解决此问题

Answer 1

您在寻找<hr>吗？还是简单地<br><br>？

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

祝你有美好的一天。

编辑：

从表单标签中删除了表单内联类，替换为跨度（您需要修复居中位置）：

<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>

Answer 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>

Bootstrap：如何在文本区域和按钮之间插入换行符？

2 个答案: