列中的引导响应按钮链接答案

【问题标题】：Bootstrap Resposive Button Link In A Column列中的引导响应按钮链接
【发布时间】：2018-01-17 13:37:52
【问题描述】：

需要在下载中放置5个按钮，最后我得到了以下代码。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2 col-md-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>

  </div>
</div>

但这里的问题是按钮中的文本是折叠的。我们希望整个文本在按钮中可见。

【问题讨论】：

在sn-p中看起来不错
使用 btn-block 类
@Kenry Sanchez 点击整页即可找到问题
@SaurabhMistry 当我使用 btn-block 时不显示全文

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

@rakeshkumar 您只需将 class="col-lg-2" 添加到所有 div 中。它解决了我的问题。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <a class="btn btn-danger" href="#">Click Here For Music & Rhyme Section</a>
    </div>

  </div>
</div>

【讨论】：