将行窗体组元素向右对齐

Question

我希望输入组元素和按钮向右对齐。我使用了浮动右形成和指定的宽度。我希望col按钮只占据按钮的大小，其余的col-to-input元素。我不想为元素指定任何宽度或固定的列大小。

是否可以使col按钮只占据按钮宽度，而其余col由输入元件占据

<div class="container">
<!--  <div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div> -->
<div class="row">
<div class="col-4">
<input class="form-control border-basic" id="searchInput" type="text" placeholder="Search Reports..">
</div>
<div class="col-8">

<form class="float-right" method="post" style="width:50%">
<div class="form-group row text-right">
<div class="col">
<div class="input-group" style="text-align:right;">
<input class="form-control border-info"  type="text" name="name" placeholder="Enter here" required>
<div class="input-group-append">
<button class="btn btn-outline-danger border-info" type="button" title="Clear">
<i class="fa fa-close fa-lg"></i>
</button>
</div>
</div>
</div>

<div class="col">
<button class="btn btn-danger" type="submit" title="Add"><i class="fa fa-plus-circle fa-lg"></i> Create</button>
</div>

</div>
</form>
</div>
</div>
</div>

https://jsfiddle.net/4fn1sz30/39/

Answer 1

请改用col-auto。这允许列缩小到其内容的宽度：

<div class="col-auto">
<button class="btn btn-danger" type="submit" title="Add"><i class="fa fa-plus-circle fa-lg"></i> Create</button>
</div>

https://codeply.com/p/p1nMc2m3gU

Answer 2

将col-4更改为col-md-4, col-sm-4, col-xs-4和col-md-8, col-sm-8, col-xs-8。

col-4确实不错。但我认为你正在使用Bootstrap来创建一个响应式网络。因此，为每个设备分辨率指定col大小是理想的。