javascript - 如何在使用 bootstrap 4 时右对齐我的按钮

Question

我无法右对齐正在打印的按钮。

这是现在的样子: 我正在使用 JavaScript 的 append 方法呈现我的 HTML。 这是仅呈现容器的 HTML。按钮由 JS 使用 append 方法填充。

我希望这两个按钮右对齐。

function handleLinkClick(testcase) {
    event.preventDefault();
    // document.getElementById("debug").innerHTML = testcase.id // DEBUG.
    let tc_string = testcase.id;
    let tc_arr = tc_string.split('@');        
    let button1 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 teButton" id="te_button" type="submit" value='+tc_arr[4]+'><i class="fa fa-download"></i> TE Log </button>';
    let button2 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 ueButton" id= "ue_button" type="submit" value='+tc_arr[5]+'><i class="fa fa-download"></i> UE Log </button>';
    $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Test case &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : '+tc_arr[0]+button1+'  '+button2+'</span></a>');
    $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Verdict &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : '+tc_arr[1]+'</a>');
    $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Observation : '+tc_arr[2]+'</a>');
    $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Start Time &nbsp;&nbsp;&nbsp; : '+tc_arr[3]+'</a>');       
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-6">
  <div class="card mt-4" id="bottom_container">
    <div class="card-header py-2">
      <h6>Details</h6>
    </div>
    <div id="bottomContainer" class="list-group " style="height:100px;">
      <!--Populated by JS function-->
    </div>
  </div>
</div>

<button id="debug" onclick="handleLinkClick(this)"> Click</button>

Answer 1

我对你的元素范围没有影响，我不建议将多个元素放在 a 标签内，因为随着你对这个特定元素的要求变得越来越复杂，你的需求会变得更加困难和更难满足，正如您现在已经看到的那样，您拥有的功能最少。但是，如果你真的需要这样做，一个简单的解决方案是将按钮 float ，如下所示，那么你只需要担心对齐文本和其他样式，但我无法预测所有需求所以我认为引导类 float-right 回答了手头的问题。

function handleLinkClick(testcase) {
  event.preventDefault();
  // document.getElementById("debug").innerHTML = testcase.id // DEBUG.
  let tc_string = testcase.id;
  let tc_arr = tc_string.split('@');
  let button1 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 teButton float-right " id="te_button" type="submit" value=' + tc_arr[4] + '><i class="fa fa-download"></i> TE Log </button>';
  let button2 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 ueButton float-right" id= "ue_button" type="submit" value=' + tc_arr[5] + '><i class="fa fa-download"></i> UE Log </button>';
  $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0">' + 'Test case : ' + tc_arr[0] + button1 + button2 + '</a>');
  $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Verdict &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : ' + tc_arr[1] + '</a>');
  $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Observation : ' + tc_arr[2] + '</a>');
  $("#bottomContainer").append('<a class="list-group-item list-group-item-light py-0 ">' + 'Start Time &nbsp;&nbsp;&nbsp; : ' + tc_arr[3] + '</a>');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-12">
  <div class="card mt-4" id="bottom_container">
    <div class="card-header py-2">
      <h6>Details</h6>
    </div>
    <div id="bottomContainer" class="list-group " style="height:100px;">
      <!--Populated by JS function-->
    </div>
  </div>
</div>

  <button id="debug" onclick="handleLinkClick(this)"> Click</button>