Bootstrap 4在容器中均勻分配空間按鈕

Question

不是一種簡單的方法，甚至可以使用flexbox將3個按鈕均勻分配到一個div中嗎？對於Flexbox來說，這是一個新手，並且在我逐漸習慣它之前，仍然試圖確定何時何地不使用它。無論哪種方式，我的HTML （實際上，JSX因爲這是反應）是：

.vol-ctr { 
    text-align: center; 
} 

Answer 1

簡單Flexbox的將是：：

<div className="container"> 
    <div> 
     <p>Ea commodo tempor magna incididunt fugiat reprehenderit laboris excepteur velit labore. Commodo dolore cillum commodo eu cillum est minim ad. Laboris proident sint anim reprehenderit fugiat pariatur nulla reprehenderit veniam duis adipisicing cupidatat laboris consequat. Reprehenderit laboris nostrud nulla cillum qui in laborum exercitation est do. Quis esse consectetur ex nisi. Nulla veniam nisi cillum cillum in in ipsum sit et labore elit cillum occaecat. Eu quis excepteur quis exercitation ut pariatur laboris in ex cupidatat irure officia tempor cillum.Voluptate Lorem id Lorem elit ipsum do cillum elit. Consectetur consectetur quis do mollit aliqua reprehenderit elit. Est dolor tempor exercitation nisi. Deserunt nulla elit qui pariatur officia pariatur aute elit culpa laborum incididunt laborum. Voluptate eiusmod voluptate elit dolore aliqua eu esse non qui voluptate elit ipsum est fugiat. Qui mollit exercitation aliqua ad occaecat id elit dolor et. Mollit aliquip ullamco ut labore. Cupidatat anim eu do ipsum enim ea. Eu incididunt qui eiusmod ipsum qui voluptate. Est esse eu ipsum fugiat dolore excepteur aliquip sint fugiat ipsum sunt aliquip exercitation.</p> 
    </div> 
    <div className="vol-ctr"> 
     <Button color="primary"> 
      <Icon name="users" />Manage Users 
     </Button> 
     <Button color="primary"> 
      <Icon name="cog" />Manage Configuration 
     </Button> 
     <Button color="primary"> 
      <Icon name="code" />Documentation 
     </Button> 
    </div> 
</div> 

和CSS，至少在中心得到這個

.vol-ctr { 
    display: flex; 
    justify-content: space-around; 
} 

---

或應用justify-content-around d-flex類。注意第一個沒有第二個（justify-content沒有display:flex沒有效果）不起作用。

<!-- --> 
    <div className="vol-ctr d-flex justify-content-around"> 
    <!-- --> 

下面是在引導V4上Flexbox當前文檔。