Question

我有一些文字我希望在按钮之前（左侧）显示，同时让按钮占据容器的其余部分。我使用bootstrap 3而且我无法弄明白。

这是我使用

的标记

<div class="row">
    <div class="col-md-5"><strong>1.</strong> <button class="btn btn-default btn-block" type="button">button text</button></div>
    <div class="col-md-7"><a href="#">My help link</a></div>
</div>

我想要获得的内容如下所示：

1. |---button text---| My help link in second column

我最终喜欢这个

1. My help link in second column |---button text---|

我是否需要放置＆＃34; 1。＆＃34;在它自己的col-md-1专栏中？试着这似乎占用了太多的空间。

Bootply：

http://www.bootply.com/Ghla07h9hU

Answer 1

这是一个棘手的场景。我建议更改范围或锚点的<button>元素。原因是块级width:auto上的<button>不像普通块级元素那样填充其容器。那么你当然需要申请width:auto。 Bootstrap尝试对width:100%应用.btn-block，但由于您希望它取其容器宽度的“其余”，因此您无法指定100%。然后，您需要使用.pull-left浮动数字范围。最后，您需要使按钮不会溢出到跨度的框格式化上下文中。您可以通过多种方式实现这一目标，但对于此方案，最好使用overflow:auto技巧（hidden也可以）。结果？这样：

http://www.bootply.com/ER76bFVCq5

.btn.my-btn {
  width: auto;
  overflow: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-5"><strong class="pull-left">1.</strong> <span class="btn btn-default btn-block my-btn">button text</span></div>
    <div class="col-md-7"><a href="#">My help link</a></div>
</div>

呼！要让它发挥作用，这是很多黑客行为。你不能把这个号码放在自己的专栏里吗？

Answer 2

在按钮上使用display: inline-block;。

此外，这是button没有离开的权利。

Answer 3

您需要删除按钮的btn-block类，因此它不再是块元素。

<div class="row">
    <div class="col-md-5"><strong>1.</strong> 
    <button class="btn btn-default " type="button">button text</button></div>
    <div class="col-md-7"><a href="#">My help link</a></div>
</div>

如果你想保持阻止行为，那么.row和.col-md-x需要重叠并且样式放弃btn-block类。

<div class="row">
    <div class="col-md-5 row"><strong class="col-md-1">1.</strong> <button class="btn btn-default col-md-10" type="button">button text</button></div>
    <div class="col-md-7"><a href="#">My help link</a></div>
</div>

bootstrap playground

在Bootstrap 3中与块级按钮在同一行显示文本

3 个答案: