Переместить кнопку с правой стороны от деления

Question

Я использую 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/

Answer 1

Решение:

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

Попробуйте добавить в код нижеуказанный класс

Answer 2

Можете ли вы попробовать заменить класс mr-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, 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 -->

Answer 3

Попробуйте это:

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

Answer 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="col-md-12">
        <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
    </div>
</div>