html - Bootstrap 创建一个大按钮

Question

如何在 bootstrap 中创建响应式大按钮

就像下图一样

/image/xEBwc.png

Answer 1

使用 class="row" wrap div 和 col-xs-4(或 col-md -4...) 到包裹按钮的 div...

使用 btn-lg 和自己的 css 来覆盖 bootstrap 定义...

我使用 width:100%; 因为你想要大按钮(如你所说...)

    .btn-default{
      width:100%;
      background-color:orange!important;
      margin:5px!important;
    }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
    <div class="container">
     <div class="row">
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
         <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
     </div>
    </div>