gpt4 book ai didi

html - Bootstrap 3 : force button to bottom of grid container

转载 作者:行者123 更新时间:2023-12-02 03:51:18 24 4
gpt4 key购买 nike

如何将“提交”按钮放置在表单右栏的底部?它应该位于“text 6”输入框的右侧 - 而不是位于“text 8”底部的顶部,如图所示。

enter image description here

codepen

  <form>
<div class="row">
<div class="col-sm-6">
<fieldset>
<input class="form-control" placeholder="text 1" />
<input class="form-control" placeholder="text 2" />
<input class="form-control" placeholder="text 3" />
<input class="form-control" placeholder="text 4" />
<input class="form-control" placeholder="text 5" />
<input class="form-control" placeholder="text 6" />
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input class="form-control" placeholder="text 7" />
<input class="form-control" placeholder="text 8" />
</fieldset>
<fieldset>
<button class="center-block btn btn-primary" type="submit">
Send</button>
</button>
</fieldset>
</div>
</div>
</form>

我已经尝试了在 S.O. 上可以找到的所有各种定位建议,但它们都以某种方式失败了。

最佳答案

您可以使用新奇的 CSS display: grid

如果需要,您可以使用grid-gap: 5px;来添加一些间距。对最新浏览器的限制相当大,但这确实有效。

更多阅读:http://gridbyexample.com

https://codepen.io/anon/pen/KvpaOm

CSS

.special-container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(6, auto);
grid-auto-flow: column;
}

.special-container button{
grid-column: 2;
grid-row: 6;
}

HTML

<body>
<form>
<div class="row">
<div class="col-sm-12 special-container">
<input class="form-control" placeholder="text 1" />
<input class="form-control" placeholder="text 2" />
<input class="form-control" placeholder="text 3" />
<input class="form-control" placeholder="text 4" />
<input class="form-control" placeholder="text 5" />
<input class="form-control" placeholder="text 6" />
<input class="form-control" placeholder="text 7" />
<input class="form-control" placeholder="text 8" />
<button class="center-block btn btn-primary" type="submit">
Send
</button>
</div>
</div>
</form>
</body>

关于html - Bootstrap 3 : force button to bottom of grid container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45334168/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com