Question

https://codepen.io/milo-boyd/pen/NzebMJ?page=1&

我如何才能证明左边的按钮和右边的图像是合理的？ HTML不会更改。谢谢。

.button {
  float:right
}

.img {
  float:left
}

<div class="container">
  <div class="row">

  <div class="col-md-6 text">
    <button type="button" class="btn btn-warning button">Warning</button>

  </div>

 <div class="col-md-6 img">
   <img 
   src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style="width:100%"/>
  </div>
    
</div>
</div>

Answer 1

尝试

https://codepen.io/anon/pen/GGPNVw?editors=1100。

HTML不变。

.row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  justify-content: space-between;
}

.text {
  float:left;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 img">
      <img src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style="width:100%"/>
    </div>
  
    <div class="col-md-6 text">
      <button type="button" class="btn btn-warning button">Warning</button>
    </div>    
</div>
</div>

Answer 2

无需为此编写外部CSS。 Bootstrap具有对齐属性。只需将类用作-float-left和float-right。看看这份文件- https://getbootstrap.com/docs/4.0/utilities/float/

<div class="container">
  <div class="row">
 <div class="col-md-6 img">
   <img class="float-left" src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style="width:100%"/>
  </div>
  <div class="col-md-6">
    <button type="button" class="btn btn-warning button float-right">Warning</button>

  </div>

</div>
</div>

Answer 3

.text{
  float:right;
  text-align:right;
  display:block;
}

.img {
  float:left
}

<div class="container">
  <div class="row">

  <div class="col-md-6 text">
    <button type="button" class="btn btn-warning button">Warning</button>

  </div>

 <div class="col-md-6 img">
   <img 
   src="https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style="width:100%"/>
  </div>

</div>
</div>

Bootstrap div左右浮动

3 个答案: