自举栅格叠加变焦

我已经引导了下面的代码并导入了jquery，并且网格系统在我的屏幕上正常工作。但是，当我尝试变焦或在较小的屏幕上的按钮都覆盖：自举栅格叠加变焦

我要的是：

较小的组件在没有任何覆盖较小的屏幕（包括小文本等）。

放大区域只是看到一些组件没有覆盖。

我尝试了“容器”和“contanier-fluid”以及不同的元首，但没有成功。有没有什么办法可以只使用bootstrap？

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
     <link rel="stylesheet" href="dist/css/bootstrap.min.css"> 
 
    </head> 
 
    
 
    <body ng-app="angularapp-example"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 1</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 2</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 3</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 4</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 5</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 6</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 7</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 8</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 9</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 10</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 11</a> 
 
       </div> 
 
       <div class="col-xs-1 col-sm-1 col-md-1"> 
 
        <a href="#" class="btn btn-info">Buton 12</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- Jquery and Bootstrap --> 
 
     <script src="dist/js/jquery.js"></script> 
 
     <script src="dist/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

太谢谢你了。

来源

2016-08-03 user1383093

直接添加col-md-1类的a元素：

  <div class="container"> 
      <div class="row"> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 1</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 2</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 3</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 4</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 5</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 6</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 7</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 8</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 9</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 10</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 11</a> 
        <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 12</a> 
      </div> 
     </div>

这里是一个小提琴：https://jsfiddle.net/o5qkq9f7/1/

来源

2016-08-03 15:34:13

但是这种解决方案的按钮并不在较小的屏幕在同一行。我只想在同一行（12行）的按钮，但更小的按钮 – user1383093

请参阅更新。您只需添加col-sm和col-xs类 –

请注意，您可能需要使用CSS来使文本对齐。只需在.btn类中添加叙述。 –

自举栅格叠加变焦

回答

相关问题