Question

我正在使用Bootstrap 3来设计我的网站。在一个大窗口中，我的按钮在其灰色框和边框内显示正常。但是，当我调整窗口大小以检查响应性时，按钮最终会超出容器的边界。

这是我的代码：

<div class="col-md-4 col-sm-12 col-xs-12 gray-box top-space">
  <h3><?php echo __("Test");?></h3>
  <p><?php echo __("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in est nec mauris dapibus porta sit amet sit amet diam. Cras sit amet imperdiet elit. Nunc vehicula consectetur augue a pretium.");?></p>
  <a href="/pricing/" class="btn-primary pull-right" ><?php echo __("Test");?></a>
</div>

这是gray-box的css。

.gray-box {
  background-color: #F5F4F4;
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  padding: 10px;
}

任何人都知道我做错了什么或需要做什么？谢谢！

Answer 1

您忘了将btn课程添加到按钮中。除了btn-default（或-primary等）之外，按钮总是需要btn类。 btn类将元素设置为看起来像按钮，btn- *类应用适当的颜色和悬停样式。

Answer 2

我头顶的两个解决方案。

1）在.clearfix后重置pull-right以重置它：

<div class="btn btn-primary pull-right">Button</div>
<div class="clearfix"></div>

2）将按钮放在自己的div中：

<div >
  <a href="" class="btn btn-primary pull-right">Button</a>
</div>

此外，无需对col-xs-12和col-sm-12以及col-md-4进行分类 - 默认值为col-xs-12，直到其他内容为止，因此您可以{{1}为了相同的结果。

Button在Bootstrap中没有容器

2 个答案: