将按钮移动到 div 的右侧答案

【问题标题】：Move button to the right side of a div将按钮移动到 div 的右侧
【发布时间】：2020-03-01 20:44:45
【问题描述】：

我正在使用 Bootstrap 4，但无法将按钮从左侧移动到右侧。我尝试了 mr-auto 和 float-right 但没有任何效果。

我的代码：

<!-- Page Content -->
    <div class="container">

      <!-- Page Heading -->
      <h1 class="my-4">Page Heading
        <small>Secondary Text</small>
      </h1>

      <!-- Project One -->
      <div class="row shadow m-b-2">
        <div class="col-md-4">
          <a href="#">
            <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
          </a>
        </div>
        <div class="col-md-8 p-3">
          <h5>Project One</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
        </div>
                <div class="mr-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
      </div>
      <!-- /.row -->

      <hr>
    </div>
    <!-- /.container -->

我的小提琴：https://jsfiddle.net/apcz8jtw/

【问题讨论】：

标签： html css wordpress bootstrap-4

【解决方案1】：

你能尝试用 ml-auto 替换 mr-auto 类吗？希望它能解决您的问题。

<!-- Page Content -->
<div class="container">

  <!-- Page Heading -->
  <h1 class="my-4">Page Heading
    <small>Secondary Text</small>
  </h1>

  <!-- Project One -->
  <div class="row shadow m-b-2">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-8 p-3">
      <h5>Project One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
            <div class="ml-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
  </div>
  <!-- /.row -->

  <hr>
</div>
<!-- /.container -->

【讨论】：

【解决方案2】：

如果您阅读文档，您会发现只有列应该直接包含在行中。

<div class="row shadow m-b-2">
    <div class="col-md-4">
        <a href="#">
            <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
        </a>
    </div>
    <div class="col-md-8 p-3">
        <h5>Project One</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
    <div class="col-md-12">
        <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
    </div>
</div>

【讨论】：

感谢@Zim，对菜鸟问题感到抱歉，我想我应该阅读文档。

【解决方案3】：

解决方案：

<div class="col-md-12">
  <a class="btn btn-primary btn-sm pull-right" href="#">View Project</a>
</div>

尝试在您的代码中添加以下类

【讨论】：

【解决方案4】：

试试这个：

 <div class="row shadow m-b-2">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-8 p-3">
      <h5>Project One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
      <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a>
    </div>
  </div>

【讨论】：