Question

我正在尝试在离子中实现工具栏，它应该与bootstrap中给出的相同。 http://jsfiddle.net/wmDL8/17/

我需要在bootstrap中实现的小提琴中实现离子相同的工具栏。我尝试了但是我的按钮占据整个宽度我需要从左和右等距离。用户应该能够添加活动类所以它知道选择了哪个按钮，哪个不是我们可以在离子

中实现工具栏吗？

这是我的代码 http://codepen.io/anon/pen/pJRJLj

find Documents -name '*.blend[12]' -exec rm -rf {} \;

Answer 1

您可以更改padding-left div的CSS padding-right和button-bar：

http://codepen.io/anon/pen/vOgOvV

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
  <a class="button">fourth</a>
</div></ion-content>

</body>

</html>

CSS：

.button-bar {
  padding-left:10%;
  padding-right:10%;
}

图像：

enter image description here

您可以将百分比更改为最终需要的百分比。

Answer 2

使用所需的值为按钮栏类添加填充：

.button-bar {
  padding-left:10%;
  padding-right:10%;
}

如何在离子中实现工具栏？

2 个答案: