将按钮移到div的右侧

2024-05-06 • 问答

我正在使用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/

如果您阅读文档，将会看到仅列应该直接包含在行中。

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

您可以尝试将ml-auto类替换为ml-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,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 -->

尝试一下：

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

解决方案：

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

尝试在代码中添加以下类

将按钮移到div的右侧

jamesrobin 回答：将按钮移到div的右侧

大家都在问