堆棧內存溢出
  簡體   English   中英

如何修復按鈕不在同一行顯示？

[英]How to fix button not displaying on the same line?

 原文  2019-12-04 12:58:30  0   3    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 個解決方案

解決方案1
 1  2019-12-04 13:25:13

這是因為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>

解決方案2
 0  2019-12-04 13:18:53

我認為........

只需將您的按鈕放在 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>

小提琴

解決方案3
 0  2019-12-04 16:15:25

就是這個：

<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/

謝謝！！！！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將按鈕和文本放在同一行？ 復選框和標簽不在同一行顯示 如何修復分享按鈕對齊所有問題？ 如何與按鈕元素在同一行渲染個性化的按鈕組件 如何修復無法在php中顯示的圖片？ 復選框顯示“開”。 怎么修？ "每次單擊復選框按鈕時，如何修復我的 JavaScript 代碼以成功顯示“ON”或“OFF”文本？" 在同一行的表單字段中顯示div 與其他元素在同一行顯示 React 組件 如何在同一行上有一個單選按鈕和一個文本字段？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM