在Bootstrap列中占用水平空间和垂直空间

Question

我在这里设置了这个设置：

正如您所看到的左选项按钮很大，这就是我需要所有按钮的方式。当我使用带有3x4列的Bootstrap网格系统时，它们需要彼此相邻排列。该按钮目前的大小（并没有占用所有可用的水平空间），因为我将此行应用于我的HTML：

style="width: 400%; height: 500%;"

只是为我想要做的事情提供视觉辅助。我是一个相当新的bootstrap，所以学习如何设计它对我来说有点棘手。下面是我的HTML。我需要CSS才能达到我想要的效果吗？如果是这样，我是否需要硬编码＆＃34; tall＆＃34;我希望按钮是或者我可以使用某种相对方法来做到这一点，这样如果在手机上查看该网站我就不会遇到问题？

我还需要在按钮中放置一个可以正确缩放的文字，但是我确定按钮缩放后可以使用吗？

<div class="categories-container">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <form role="button">
                    <div class="input-group">
                        <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
                    </div>
                </form>
            </div>
            <div class="col-md-4">
                <form role="button">
                    <div class="input-group">
                        <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
                    </div>
                </form>
            </div>
            <div class="col-md-4">
                <form role="button">
                    <div class="input-group">
                        <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

以下是我认为你要做的两个例子。

1）使用Justified button group代替网格，并使用媒体查询调整视口大小。

2）在示例中使用网格，然后使用媒体查询调整视口大小。

请参阅示例代码段。

.btn.btn-bg {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg {
    height: 150px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg {
    height: 75px;
    font-size: 22px;
  }
}
@media (max-width: 360px) {
  .btn.btn-bg {
    height: 35px;
    font-size: 15px;
  }
}
/*Second Sample*/

.btn.btn-bg2 {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg2 {
    height: 60px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg2 {
    height: 45px;
    font-size: 20px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Right</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="row ">
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
    </div>
  </div>
</div>

Answer 2

要获得宽度，您需要设置按钮，并且它所在的div具有100％宽度：

.btn, .input-group {
    width: 100%;
}

对于高度，您可以使用css并使用css中的vw按视口大小缩放高度，或者，如果您愿意，可以使用jquery使高度与宽度成正比：

$(document).ready(btnHeight);
$(window).on('resize', btnHeight);

function btnHeight() {
    var width = $('.btn').width();
    $('.btn').css('height', width*0.8);
};

要缩放字体大小，您可以使用vw或仅使用媒体查询。 http://www.bootply.com/atAkVSnhQc