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

我正在使用 Bootstrap 4,但无法将按钮从左侧移动到右侧。我尝试了 mr-autofloat-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>
        

        【讨论】:

          猜你喜欢
          • 2021-05-06
          • 2022-11-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-08-17
          • 1970-01-01
          • 2016-05-31
          • 1970-01-01
          相关资源
          最近更新 更多