Question

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

＆＃13;

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

＆＃13;

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

Answer 1

@rakeshkumar你只需要添加class =＆＃34; col-lg-2＆＃34;对你所有的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>

列中的Bootstrap Resposive Button Link

1 个答案: