为什么 float: right/pull-right 在下面的代码中不起作用？

Question

<div class="col-xs-12" style="padding:0px">
  <div class="col-xs-6 pull-left">
    <div class="col-xs-12"><strong>Cooking Details</strong></div>
    
    <div class="col-xs-12">
      <span class="col-xs-6 pull-left">Ingredient</span>
      <span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
    </div>
  <div>
<div>

右拉对于烹饪细节行很好用，但是对于配料和数量我无法用pull-right/float格式化：对。

我希望数量在它所在的 div 的末尾。它正在获得 50% 的宽度，但 float:right 不工作

Answer 1

我不确定你是否想要这样的东西。当你添加 col 时，你必须使用 div with row class a wrapper

#EDITED：更好的解决方案

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<div style="padding: 0px;">
  <h4>
    <strong>Cooking Details</strong>
  </h4>

  <div>
    <span class="pull-left">Ingredient</span>
    <span class="pull-right">Quantity</span>
  </div>
</div>

或Bootstrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
    
    <div>
      <h4>
        <strong>Cooking Details</strong>
      </h4>

      <div>
        <span class="float-left">Ingredient</span>
        <span class="float-right">Quantity</span>
      </div>
    </div>

Answer 2

Bootstrap3:https://www.codeply.com/p/OSJMu17P9a

<div class="col-xs-12" style="padding:0px">
    <div class="col-xs-12"><strong>Cooking Details</strong></div>
    <div class="col-xs-6">
        <span class="pull-left">Ingredient</span>
        <span class="pull-right" style="padding-right:0px">Quantity</span>
    </div>
</div>

Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#

<div class="col-12" style="padding:0px">
    <div class="col-12"><strong>Cooking Details</strong></div>
    <div class="col-6">
        <span class="float-left">Ingredient</span>
        <span class="float-right" style="padding-right:0px">Quantity</span>
    </div>
</div>

为什么 float: right/pull-right 在下面的代码中不起作用？

Why float: right/ pull-right dont work in the below code?

css

styling

angular-ui