如何使按钮水平对齐答案

【问题标题】：How Can I Make Buttons Align Horizontally如何使按钮水平对齐
【发布时间】：2020-10-08 21:48:46
【问题描述】：

我尝试对齐代码（链接）以使按钮水平对齐与堆叠对齐。有什么建议吗？新的这个与 CSS/Bootstrap 一起深入工作。 http://jsfiddle.net/kuedrgoL/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="listmenu">
    <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p></div>
    </div>
    <div class="mini-layout fluid">
     <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
    </div>
    </div>
    <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
    </div>
    </div>

【问题讨论】：

你看到getbootstrap.com/docs/4.0/components/navbar了吗？
好像是一个垂直的侧边栏，从ta开始，如果你想要它是水平的，你需要使用另一组引导类。除非我误解了这个问题。
哦，天哪，我不太清楚，该死

标签： html css twitter-bootstrap button bootstrap-4

【解决方案1】：

你有很多方法可以使这个水平 第一种方式

#listmenu{
display:flex;
}

第二种方式，如果你使用 Bootstrap

<div class="container">
<div class="row">
  <div class="col-sm">
    <div class="mini-layout fluid">
     <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p> 
      </div>
     </div>
    </div>

    <div class="col-sm">
     <div class="mini-layout fluid">
       <div class="mini-layout-sidebar2">
       <p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
        </div>
      </div>
      </div>

      <div class="col-sm">
        <div class="mini-layout fluid">
         <div class="mini-layout-sidebar2">
         <p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
         </div>
       </div>
     </div>
   </div>
</div>

阅读本文的最后一种方式 https://getbootstrap.com/docs/4.0/utilities/flex/

【讨论】：

【解决方案2】：

您可以通过使用带有 Bootstrap 实用程序类的弹性布局来实现这一点。请注意向#listmenu 添加类和删除btn-block 类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="listmenu" class="d-flex justify-content-start align-items-center">
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm mr-2" href="index.cfm">Program Home</a></p>
    </div>
  </div>
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm mr-2" href="Courses.cfm">Course Descriptions</a></p>
    </div>
  </div>
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm" href="Optional.cfm">Optional Learning</a></p>
    </div>
  </div>

【讨论】：