Question

我已经创建了两个单独的按钮，但是它们紧密地包装在一起，而我试图使用ml-auto之间没有空格。 UI方面并没有太大区别，需要围绕它进行一些帮助。

<div class="form-group row">
    <div class="col-xs-3 ml-auto">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Start New Course
        </button>
    </div>
</div>

<div class="form-group row">
    <div class="col-xs-3 ml-auto">
        <a class="btn btn-large btn-success" id="viewCourse" href="@Url.Action("ViewCourses", "Home")">View Grades</a>
        <script type="text/javascript">
            $('#ViewCourses').on('click', function (e) {});
        </script>
    </div>
</div>

Answer 1

首先，我认为您的两个按钮都必须位于.row元素内。现在它们在不同的行上。然后，您可以将类似.mr-2的类（2个单元的右边距，或者如果需要更多则增加个数）应用于第一个按钮包装器。这样您的按钮之间就会有一些间距。

<div class="row">
  <div class="form-group">
    <div class="col-xs-3 mr-2">
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
         Start New Course
       </button>
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-3">
      <a class="btn btn-large btn-success" id="viewCourse" href="@Url.Action("ViewCourses", "Home")">View Grades</a>
      <script type="text/javascript">
        $('#ViewCourses').on('click', function (e) {});
      </script>
    </div>
  </div>
</div>

您可以在此处查看有效的解决方案：https://codepen.io/razvan-tudosa/pen/YzqvQVm

有关如何在Twitter引导文档中找到内容的更多信息，https://getbootstrap.com/docs/4.5/utilities/spacing/

如何使用ml-auto在引导程序中的按钮之间留出空间？

1 个答案: