如何解决按钮不在同一行显示的问题？

时间：2019-12-04 12:58:30

标签： javascript html css twitter-bootstrap jquery-select2

我正在尝试将此button标签放在同一行上并连接到我的输入字段。对于输入字段，我正在使用一个名为select2的库。它建立在已使用的select标签之上。我在<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>

3 个答案:

答案 0 :(得分：1)

发生这种情况是因为 select2插件生成的“。select2-container” 具有CSS属性 display：inline-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>

答案 1 :(得分：0)

我认为........

只需将按钮放在div内即可。

$('.select2').select2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>
    <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">
          <div class="row col-lg-12">
            <label>Tier:</label>
            <select class="js-example-basic-single select2" 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>
      <div class="row">
        <div class="col col-lg-9 search-bar">
          <div class="form-group">
            <div class="row col-lg-12">
              <label>Type:</label>
              <select class="js-example-basic-single select2" 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>
    </div>
  </form>
</div>

Fiddle

答案 2 :(得分：0)

就这样：

<div class="container-fluid">
            <div class="row" style="display: flex; flex-direction: row;">
                <div class="col-xs-4 col-sm-2 col-md-4">
                    <h5> General<br> Information
                    </h5>
                </div>
                <div class="col-xs-4 col-sm-5 col-md-4" style="display: inline-block;">
                    <label>Tier:</label>
                    <select>
                        <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>
                    <button class="btn btn-primary">Search</button>
                </div>
                <div class="col-xs-4 col-sm-5 col-md-4" style="display: inline-block;">
                    <label>Tier:</label>
                    <select>
                        <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>
                    <button class="btn btn-primary">Search</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6" ;>
                    <div class=" form-group ">
                        <label>Selector Name:</label>
                        <input class="form-control form-control-sm " type="text ">
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 " ;>
                    <div class="form-group">
                        <label>Computer Path:</label>
                        <label>Tier:</label>
                        <select>
                            <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>
                        <button class="btn btn-primary">Search</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <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>

检查https://jsfiddle.net/sugandhnikhil/cq1mu06e/

谢谢!!!!

相关问题
最新问题