Question

警报下方有六个按钮，为什么它们如此间隔？ This是他们在普通浏览器中的样子，this是我希望他们看起来的样子。

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

html, body { background-color: #108A93; }

.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }

span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-xs-4"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
        <div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00</button> </div>
        <div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
      </div>
      <div class="row">
      <div class="row">
        <div class="col-xs-4"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
        <div class="col-xs-4"> <button class="btn btn-default btn-block">0</button> </div>
        <div class="col-xs-4"> <button class="btn btn-default btn-block">0/s</button> </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

默认情况下，在boostrap上有一个填充，每边15px。添加类no-padding解决了这个问题。

@import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

html, body { background-color: #108A93; }

.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }

span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }
.no-padding{padding:0;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div class="row">
        <div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
        <div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00</button> </div>
        <div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
      </div>
      
      <div class="row">
        <div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
        <div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0</button> </div>
        <div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0/s</button> </div>
      </div>
    
  </div>
</div>
</div>

为什么这些按钮如此分开？

1 个答案: