如何将几个按钮与响应式设计联机？

Question

让我有几个按钮

  <button ng-repeat="a in graphdata" class="inline">

我需要将所有这些按钮对齐，并且所有按钮都应该可见，并且在添加新按钮时应调整其宽度。 按钮应相互连接。

Answer 1

您可以使用flexbox

$('.new').click(function() {
  $('.element').append('<button class="inline">Button</button>');
});

.element {
  display: flex;
}
button {
  flex: 1;
  background: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="new">Add new Button</button>
<div class="element">
  <button class="inline">Button</button>
</div>

Answer 2

你应该用flex容器包裹你的按钮。

<style>
  .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    flex-wrap: wrap; /* if you want buttons in several lines */
  }

  button {
    min-width: 50px;
  }
</style>

<div class="wrapper">
  <button ng-repeat="a in graphdata" class="inline"></button>
</div>