如何在文本区域底部之外分配按钮？

Question

嗨，当前有行的图像

但我想要下面显示的结果

我在文本区域中使用了 5 行，所以我希望按钮显示在文本区域的底部附近。

编码如下：

<div class="row">
<p class="col-sm-6 col-md-10 ">
<b >Mail</b> <br />                                                         
<textarea class="form-control" rows="5" id="Email"></textarea>
</p>
<p class="col-sm-6 col-md-2">
<br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a></p> </div>

我发现很少有建议添加 bootstrap 4.0 link 的答案。但是这个实际上不起作用，只是改变了我的显示。图片如下

Answer 1

下面是这个问题最肮脏的答案，但对我有用

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative">
<div class="col-sm-6 col-md-10 ">
<b >Mail</b> <br />                                                         
<textarea class="form-control" rows="5" id="Email"></textarea>
</div>
<div class="col-sm-6 col-md-2" style="position:relative">
<br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block" style="position:absolute;bottom:0"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a></div> </div>

Answer 2

你最好用table

<div class="row">
<table style="width: 100%">
    <tr>
        <td class="col-md-6 col-md-offset-1">
                <b >Mail</b>
        </td>
    </tr>
 <tr>
     <td>
            <textarea class="form-control" rows="5" id="Email"></textarea>
     </td>
     <td style="vertical-align: bottom">
            <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
     </td>
 </tr>       
</table>
 </div>

Answer 3

使用bootstrap的内联形式。还要将按钮的位置设置为绝对位置，将 bottom:0 和父级 div 设置为 position:relative。这样它将相对于其父级位于底部区域。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container" style="position:relative">
  <form class="form-inline" action="/action_page.php">
  <div class="form-group col-xs-10">
   <textarea class="form-control" rows="5" id="comment"></textarea>
  </div>

  <button type="submit" style="position:absolute;bottom:15px;" class="btn btn-default">Submit</button>

</form> 
</div>

Answer 4

当您使用 Bootstrap 4 时，您可以将 d-flex align-items-end 从新的 Bootstrap 4 flexbox utilities...

用于按钮包装器

此外，将您的段落列更改为 div，因为它不是段落，请参阅：https://www.w3schools.com/html/html_paragraphs.asp

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2 d-flex align-items-end">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

Without using Bootstrap you can add class to your wrapper and add the following to your css

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

<div class="container">
  <div class="row form-wrapper">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

Answer 5

感谢大家的所有建议。我首先尝试过。我不确定我是否错误地尝试了您的答案，或者其他原因，我从来没有得到没有任何缺陷的预期结果。之后只需将 <br /> 添加到代码中即可解决我的问题。所以，我刚刚在下面添加了我的答案。

<p class="col-sm-6 col-md-6 ">
<b >Mail </b> <br />
<textarea class="form-control" rows="5" id="Email"></textarea>
</p>
<p class="col-sm-6 col-md-2 col-xs-12" ">
<br /><br /><br  /><br /><br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
</p>

这解决了我的问题并得到了我预期的结果

如何在文本区域底部之外分配按钮？

How to Assign button outside bottom of text area?

css

textarea

button

bootstrap-4