代码之家 › 专栏 › 技术社区 › Rastislav

如何通过引导为行中的按钮设置相同的边距

row button css html

Rastislav · 技术社区 · 8 年前

正如标题所说,这是我的问题。我想要像margin这样的东西:auto。

这是我的html文件

 <div class="container-fluid clenovia-button">
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">TrÃ©neri</button></div>
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">MuÅ¾i</button></div>
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Juniori</button></div>
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Dorastenci</button></div>
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">StarÅ¡Ã Å¾iaci</button></div>
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">MladÅ¡Ã Å¾iaci</button></div>
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">PrÃpravka</button></div>
</div>

    .clenovia-button{
    display: inline-block;
    margin: auto;
}
.clenovia-button button{
    padding: 3px;
}

1 回复 | 直到 8 年前

RïshïKêsh Kümar 8 年前

.btn-primary-spacing 
{
margin-right: 3px;
margin-bottom: 3px !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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-sm- col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
TrÃ©neri
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  MuÅ¾i
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Juniori
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Dorastenci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
 StarÅ¡Ã Å¾iaci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  MladÅ¡Ã Å¾iaci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
PrÃpravka
</button>
</div>