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链接。但这个实际上不起作用，但只改变了我的显示。图片如下

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

使用内联形式的bootstrap。同时将按钮的位置设置为绝对位置和底部位置：0和父级div位置：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 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>

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>

不使用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>

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>

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

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

5 个答案: