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标签中放置多个元素，因为随着您对该特定元素的要求变得越来越复杂，您的需求将越来越难满足，因为您现在已经拥有很少的功能，现在已经可以看到。但是，如果您确实需要这种方式，那么一个简单的解决方案是按如下所示将按钮向右浮动，那么您只需要担心对齐文本和其他样式，但是我无法预测所有需求所以我认为bootstraps类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>

使用Bootstrap 4时如何正确对齐按钮

1 个答案: