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