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

【问题标题】：How to Assign button outside bottom of text area?如何在文本区域底部之外分配按钮？
【发布时间】：2018-02-06 05:35:31
【问题描述】：

您好当前有行的图片

但我希望结果显示在下方

我在文本区域中使用了 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>

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

【问题讨论】：

我的回答对你有用吗？
不需要额外的代码，因为您使用的是 bootstrap 4，您只需使用新的 bootstrap 本机类即可实现它...请看我的回答...
使用引导程序的内联形式。我已经提供了一个例子。只需检查并根据您进行定制。可能有帮助

标签： css button textarea bootstrap-4

【解决方案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>

【讨论】：

嗨，不，它对我不起作用..在我添加引导链接后，它只改变了我的整个页面显示..就像只改变字体大小按钮大小和颜色..但我的预期结果不是可用
@Halim，你能分享一下截图吗？
@Halim，您使用的是哪个 css 库？我以为您使用的是引导程序。这就是我导入引导程序的原因。
我用过但我认为你的版本是 4.0 对吗？两者完全不同吧？
@Halim，你可以使用自己的 bootstrap 版本，不需要使用我正在使用的 bootstrap 版本。

【解决方案2】：

使用引导程序的内联形式。还将按钮的位置设置为绝对位置和底部：0，并将父 div 设置为位置：相对。这样它就位于其父级的底部区域。

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

【讨论】：

当我尝试为 bootsrap 添加链接时，我的页面完全改变了。我不太擅长引导程序，但我认为我们的项目已经使用了一些以前版本的引导程序。突然我忙于一些紧急工作，抱歉迟到了。
@Halim 您正在使用哪个版本。在您的问题中添加cdn链接，以便我们正确回答
我们在共享文件夹下使用的链接是
打开该文件并检查版本@Halim

【解决方案3】：

你最好用桌子

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

【讨论】：

它的工作，但不完全像我想要的。它为我预期的
下面的表格创建新行
对不起，我忘了提到你，在一行中有 3 个字段，其中 col-4 作为时间，col-6 作为电子邮件，col-2 作为保存按钮。如果我尝试在有或没有表格的情况下添加此代码，它仍然在下面一行

【解决方案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>

在不使用 Bootstrap 的情况下，您可以将类添加到您的包装器中，并将以下内容添加到您的 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>

【讨论】：

我更新了我的问题，请查看。当我导入 bootstrap 4.0 的链接时，它改变了我的页面外观和显示
我试过你的。它仅在我包含 href 链接时才有效，但它完全改变了我的页面显示每个选项卡、按钮和表格的大小，而且它无法加载数据。
好吧，我可以看到你已经标记了bootstrap-4，无论如何我更新了答案。

【解决方案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>

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

【讨论】：