html - Bootstrap 响应式按钮链接在一列中

Question

需要在下载中放置 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>

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

Answer 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>