Question

我正在创建一个简单的网页，它将有三个大按钮，应该填满整个页面（即，它们跨越页面的宽度，并且应该占据每个高度的33.3％。）我有宽度部分工作，但我不确定如何使高度部分工作。到目前为止这是我的代码。

<html>

  <link rel="stylesheet" href="./bootstrap.min.css"/>
  <link rel="stylesheet" href="./bootstrap-theme.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
  <div class="container-fluid">
    <div class="row">
      <div class="jumbotron">
        <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif">
          <div class="col-md-4">
            <a href="https://encore.mpl.on.ca/iii/mobile/homepage?lang=eng" class="btn btn-block btn-lg btn-primary"><i class = "fa fa-search fa-3x"></i>  &nbsp<h1>Catalogue Search</h1></a>
          </div>
          <div class="col-md-4">
            <a href="https://encore.mpl.on.ca/iii/mobile/homepage/Sdologin?lang=eng&loginReason=doDefault" class="btn btn-block btn-lg btn-info"><i class = "fa fa-sign-in fa-3x"></i> &nbsp<h1>Library Account Login</h1></button></a>
          </div>
          <div class="col-md-4">
            <a href="http://www.mpl.on.ca/hours.php" class="btn btn-block btn-lg btn-danger"><i class = "fa fa-map-marker fa-3x"></i>  &nbsp<h1>Hours and Locations</h1></button></a>
          </div>
        </span>
      </div>
    </div>
  </div>
</html>

Answer 1

以下小提琴link可能会解决您的问题。

代码如下： HTML：

<div class="container-fluid">
    <div class="row">
        <button id="catalogSearch" class="btn btn-default">Catalogue Search </button>
    </div>
    <br/><br/>
    <div class="row">
        <button type="button" id = "AccountLogin" class="btn btn-default">Library Account Login</button>
    </div>
    <br/><br/>
    <div class="row">
        <button id ="hrsLocations" class="btn btn-default btn-lg">  Hours and Locations</button>
    </div>
</div>

CSS：

.btn 
{
  width:100%;
  padding: 12%; 
}

JavsScript

document.getElementById("catalogSearch").onclick = function () {
        location.href = "https://encore.mpl.on.ca/iii/mobile/homepage?lang=eng";
   };

document.getElementById("AccountLogin").onclick = function () {
        location.href = "https://encore.mpl.on.ca/iii/mobile/homepage/Sdologin?lang=eng&loginReason=doDefault";
    };

document.getElementById("hrsLocations").onclick = function () {
        location.href = "http://www.mpl.on.ca/hours.php";
    };

Answer 2

试试这个没有引导程序:) //这将调用按钮并设计

.button {
    background-color: gray;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin:10px
}

  // this will assign sizes of the button you want
.btnbig {
    width: 99%;
    height: 500px;
}

  //btnbig is the class of your button you want to modify

<div class="button btnbig">A big button</div>

现在这个清楚吗？对不起（我是新手）

Answer 3

您尚未指定是否使用Bootstrap v3或v4。
您应该仅使用.col-*-*作为.row元素的子元素或具有默认margin: 0 -15px的任何其他元素（例如.form-group s）。
当您不希望自己的元素为其父宽度的1/3时，您正在使用.col-*-4。
您在同一页面上使用了3个<h1>代码，这是一个非常大的 no-no SEO-wise。

使用Bootstrap v3（这是我假设您正在使用的）可能是实现您想要的最简单的方法，将.btn-block与flexbox结合使用。另请注意，我对标记做了重大更改（您的标记无效）。

＆＃13;

body {
  margin: 0;
}
div.jumbotron {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  margin-bottom: 0;
}
.jumbotron > .btn-block {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  align-items: stretch;
}
.jumbotron > .btn-block > .btn {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .jumbotron > .btn-block {
    min-height: calc(100vh - 120px);
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>


<div class="container-fluid">
    <div class="row">
      <div class="jumbotron">
        <div class="btn-group-vertical btn-group btn-block">
          <a href="https://encore.mpl.on.ca/iii/mobile/homepage?lang=eng" class="btn btn-block btn-lg btn-primary"><i class = "fa fa-search fa-3x"></i><h1>Catalogue Search</h1></a>
          <a href="https://encore.mpl.on.ca/iii/mobile/homepage/Sdologin?lang=eng&loginReason=doDefault" class="btn btn-lg btn-block btn-info"><i class = "fa fa-sign-in fa-3x"></i><h1>Library Account Login</h1></a>
          <a href="http://www.mpl.on.ca/hours.php" class="btn btn-lg btn-block btn-danger"><i class = "fa fa-map-marker fa-3x"></i><h1>Hours and Locations</h1></a>
        </div>
      </div>
    </div>
  </div>

＆＃13;

别忘了autoprefix

Answer 4

如果我正确理解了这个问题，那么您可以使用CSS calc将高度设置为页面的百分比。

.btn-block {
display: block;
width: 100%;
height: calc(100vh/3);
}

让BootStrap按钮填满屏幕的高度

4 个答案: