Çeşitli düğmelere duyarlı tasarıma nasıl eklenir?

Question

Let i düğmeleri bir çizgide tüm bu düğmeleri hizalamak için gereken

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

bir kaç dizi var ve tüm düğmeleri görünür olmalıdır ve yeni düğme eklenmeye edildiğinde onun genişliğini ayarlamak gerekir. Düğme birbirine eklenmelidir.

Answer 1

Sen esnek konteyner ile düğmeleri yerleştirilmeli 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

kullanabilirsiniz.

<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>