行之间的引导空间

时间:2017-03-28 09:45:46

标签: css twitter-bootstrap

我想在带有按钮的行之间放置一些空格(每行三个按钮)。在我的示例中,每一行都在sb.AppendLine( string.Format("('{0}', '{1}', '{2}', '{3}', '{4}', N'{5}', '{6}', '0', '{7}', '{8}', '{7}', '{8}')," , ID // 0 , DevID //1 , sDTime // 2 , sDevTime // 3 , aryDcaRVerCounter[i].Index.ToString() // 4 , aryDcaRVerCounter[i].Name // 5 , aryDcaRVerCounter[i].Code // 6 , sUpdateTime // 7 , UserId // 8 ) 元素内,标有引导类div

我知道我可以使用内联样式解决这个问题并输入像btn-toolbar这样的参数或编写自定义css类但是我想知道是否有一些bootstrap类呢?

代码:

margin-top

1 个答案:

答案 0 :(得分:2)

你可以使用 form-group 来提供15px的空间来提供垂直空间。

如果你想在col-md-column- *之间留出空间,请使用 col-md-offset - *



  <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.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <br/>
  

    <button type="button" class="btn btn-primary" style="margin-right:30px;">Nazaj</button>


  
  
  <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>

  

   <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>

  
  
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>

  <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>

  

   <button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>
 

<button type="button" class="btn btn-success">Shrani</button>

<br/>
<br/>
<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>

<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>

<div class="btn-toolbar form-group">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 <button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>


  

  
  
&#13;
&#13;
&#13;