Question

使用第一个按钮将第二个按钮放在同一行上需要使用哪个类。我正在使用bootstrap 4.

<div class="container">

           <div class="row justify-content-sm-center">

               <div class="col-sm-5 kappa">

                   <h3>Don't have an account?</h3>
                   <hr>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi facere officiis numquam alias, delectus beatae autem facilis aliquid voluptates aspernatur, eaque suscipit possimus eveniet praesentium explicabo itaque nulla distinctio.
                   </p>
                   <button type="button">sign up</button>
               </div>

               <div class="col-sm-5 kappa">
                   <h3>Have an account?</h3>
                   <hr>
                   <p>
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit!
                   </p>
                   <button type="button" class="">login</button>
               </div>

           </div>
        </div>

Answer 1

由于没有提供代码，假设您正在使用Bootstrap 4并应用flexbox css，在Bootstrap 4中该类调用.d-flex。将.d-flex应用于父级后，所有直接后代都可以使用margin轻松对齐。在Bootstrap 4中，它是mt-auto和mb-0。

.bigcontainer{

height:300px;
background:grey;
width:40%;
float:left;
margin:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="bigcontainer d-flex flex-column">
  <div>Title</div>
  <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
  <div class="mt-auto mb-0"><button>button</button></div>
</div>

<div class="bigcontainer d-flex flex-column">
  <div>Title</div>
  <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
  <div class="mt-auto mb-0"><button>button</button></div>
</div>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
        .cs-button {
            position: absolute;
            bottom: 0;
            margin-bottom: 20px;
        }
        </style>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
                  <div>Title</div>
                  <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0" >
                    <div class="mt-auto mb-0"><button>button</button></div>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
                  <div>Title</div>
                  <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0">
                    <div class="mt-auto mb-0"><button>button</button></div>
                  </div>
                </div>
            </div>
        </div>

用于定位的Bootstrap类

2 个答案: