javascript - 如何修复按钮不显示在同一行？

Question

我正在尝试获取此 button在同一行上标记并连接到我的输入字段。对于输入字段，我使用了一个名为 select2 的库.它建立在已经使用的选择标签之上。我在 <span> 中有按钮标记但是，它仍然不会将按钮应用于同一行。不确定我哪里出错了，但我似乎无法找到解决方案。

HTML:

     <div class="col-md-9 right-pane">
                <form>
                  <div class="row">

                     <div class="col col-md-12 text-left"> 
                        <h4>General Information</h4>
                     </div>

                          <div class="col col-lg-9 search-bar">
                              <div class="form-group tt">
                                  <label>Tier:</label>
                                  <select class="js-example-basic-single" name="state" id="mySelect2">
                                      <option value="AL">Alabama</option>                        
                                      <option value="WY">Wyoming</option>
                                      <option value="FL">Florida</option>                        
                                      <option value="CA">California</option>
                                      <option value="NJ">New Jersey</option>                        
                                      <option value="NY">New York</option>
                                    </select>
                                   <span><button class="btn btn-primary">Search</button></span>
                              </div>

                            </div>


                          <div class="col col-lg-9 search-bar">
                              <div class="form-group">
                                  <label>Type:</label>
                                  <select class="js-example-basic-single" name="state">
                                      <option value="AL">Alabama</option>                        
                                      <option value="WY">Wyoming</option>
                                      <option value="FL">Florida</option>                        
                                      <option value="CA">California</option>
                                      <option value="NJ">New Jersey</option>                        
                                      <option value="NY">New York</option>
                                    </select>
                                    <span><button class="btn btn-primary">Search</button></span>
                              </div>
                            </div>


                          <div class="col col-lg-9 search-bar">
                              <div class="form-group">
                                  <label>Selector Name:</label>
                                  <input class="form-control form-control-sm" type="text">
                              </div>
                          </div>



                          <div class="col col-lg-9 search-bar">
                              <div class="form-group">
                                  <label>Computer Path:</label>
                                  <select class="js-example-basic-single" name="state">
                                      <option value="AL">Alabama</option>                        
                                      <option value="WY">Wyoming</option>
                                      <option value="FL">Florida</option>                        
                                      <option value="CA">California</option>
                                      <option value="NJ">New Jersey</option>                        
                                      <option value="NY">New York</option>
                                    </select>
                                    <span><button class="btn btn-primary">Search</button></span>

                                  </div>
                            </div>




                  </div>

                  <div class="row">
                      <div class="col col-md-9">      

                          <h6>Selection Rule Preview</h6>                        
                          <span class="label">Taddm Query</span>
                          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">Random Textarea</textarea>
                          <br>
                      </div>
                  </div>                      
                </div>
              </form>

Answer 1

这是因为 ".select2-container" 由 select2 plugin 生成的 css 属性 display:inline-block。

这在两个内联或内联 block 元素之间留下了一些空间。如果要删除，可以使用 float 或 flex。

下面提供的示例。

$(function(){
		$('.js-example-basic-single').select2();
	})

.groupleft > span{float:left}
.groupflex{display:flex}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<div class="col-md-9 right-pane">
	<form>
	<!--########  Use of Float CSS  ###########-->
		<div class="row">
			<div class="col col-md-12 text-left"> 
				<h4>General Information</h4>
			</div>
			<div class="col col-lg-9 search-bar">
				<div class="form-group">
					<div class="col-sm-3"><div class="row">Computer Path:</div></div>
					<div class="col-sm-9 groupleft">
					<select class="js-example-basic-single" name="state">
					  <option value="AL">Alabama</option>                        
					  <option value="WY">Wyoming</option>
					  <option value="FL">Florida</option>                        
					  <option value="CA">California</option>
					  <option value="NJ">New Jersey</option>                        
					  <option value="NY">New York</option>
					</select>
					<span><button class="btn btn-primary">Search</button></span>
					</div>
				</div>
			</div>
		</div> 
		
		<!--########  Use of Flex CSS  ###########-->
		<div class="row">
			<div class="col col-md-12 text-left"> 
				<h4>General Information</h4>
			</div>
			<div class="col col-lg-9 search-bar">
				<div class="form-group">
					<div class="col-sm-3"><div class="row">Computer Path:</div></div>
					<div class="col-sm-9 groupflex">
					<select class="js-example-basic-single" name="state">
					  <option value="AL">Alabama</option>                        
					  <option value="WY">Wyoming</option>
					  <option value="FL">Florida</option>                        
					  <option value="CA">California</option>
					  <option value="NJ">New Jersey</option>                        
					  <option value="NY">New York</option>
					</select>
					<span><button class="btn btn-primary">Search</button></span>
					</div>
				</div>
			</div>
		</div> 
	</form>                     
</div>