如何在Twitter Bootstrap 3中居按钮？

作者: 楊♡
发布时间: 2024-03-20 02:10:59 (1月前)
转自：

11 条回复

0#
回复此人
一只特立独行的猪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 或者您可以给出特定的偏移量，使按钮位置只需要使用自举网格系统， </p> <pre> <code> <div class="col-md-offset-4 col-md-2 col-md-offset-5"> <input type="submit" class="btn btn-block" value="submit"/> </code> </pre> <P> 这样，如果设置btn-block，也可以指定按钮大小。当然，这只适用于md尺寸范围，如果你想设置其他尺寸，请使用xs，sm，lg。 </p> </DIV>

编辑
1#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以通过提供保证金或绝对定位这些元素来实现。 </p> <P> 例如 </p> <pre> <code> .button{ margin:0px auto; //it will center them } </code> </pre> <P> 0px将来自顶部和底部，auto将来自左侧和右侧。 </p> </DIV>

编辑
2#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这个对我有用试着做一个独立的 <code> <div> </code> 然后把 <code> button </code> 进入那个。像这样： </p> <pre> <code> <div id="contactBtn"> <button type="submit" class="btn btn-primary ">Send</button> </div> </code> </pre> <P> 然后去你的 <code> CSS </code> 样式页面并执行 <code> Text-align:center </code> 像这样： </p> <pre> <code> #contactBtn{text-align: center;} </code> </pre> </DIV>

编辑
3#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 添加到你的风格： </强> </p> <P> 显示：表; 保证金：0自动; </p> </DIV>

编辑
4#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有这个问题。我用了 </p> <pre> <code> <div class = "col-xs-8 text-center"> </code> </pre> <P> 在我的div上包含几条h3线，一对h4线和一个自举按钮。我使用文本中心后，除了按钮之外的所有东西都跳到了中心，所以我进入了我的css表覆盖引导程序并给了按钮一个 </p> <pre> <code> margin: auto; </code> </pre> <P> 这似乎解决了这个问题。 </p> <P> 这是我在这里的第一个贡献，我希望它有所帮助！ </p> </DIV>

编辑
5#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用 <code> text-align: center </code> css属性 </p> </DIV>

编辑
6#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap 4更新： </p> <P> 使用带有'd-flex'和'justify-content-center'实用程序类的div设置包裹按钮以利用flexbox。 </p> <pre> <code>  <div class="form-group"> <div class="d-flex justify-content-center"> <button id="singlebutton" name="singlebutton" class="btn btn-primary"> Next Step! </button> </div> </div> </code> </pre> <P> 使用flexbox的好处是能够在同一轴上添加其他元素/按钮，但具有各自独立的对齐方式。它还开启了与'align-items-start / center / end'类垂直对齐的可能性。 </p> <P> 您可以使用另一个div来包装标签和按钮，以使它们彼此对齐。 </p> <P> 例如 <a href="https://codepen.io/anon/pen/BJoeRY?editors=1000" rel="nofollow noreferrer"> https://codepen.io/anon/pen/BJoeRY?editors=1000 </A> </p> </DIV>

编辑
7#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以执行以下操作。它还避免了按钮重叠。 </p> <pre> <code> <div class="center-block" style="max-width:400px"> <a href="#" class="btn btn-success">Accept</a> <a href="#" class="btn btn-danger"> Reject</a> </div> </code> </pre> </DIV>

编辑
8#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <div class="row"> <div class="col-sm-12"> <div class="text-center"> <button class="btn btn-primary" id="singlebutton"> Next Step!</button> </div> </div> </div> </code> </pre> </DIV>

编辑
9#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <div class="container-fluid"> <div class="col-sm-12 text-center"> <button class="btn btn-primary" title="Submit"></button> <button class="btn btn-warning" title="Cancel"></button> </div> </div> </code> </pre> </DIV>

编辑

登录后才能参与评论