blocks|key|172638|text|我使用bootstrap中的代码片段也遇到了类似的问题。我发现两个类'control-group‘和’control‘破坏了内联。移除这两个类为我解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172639|<div+class="control-group">
++++++++++++<label+class="control-label"+for="Name">Name</label>
++++++++++++<div+class="controls">
++++++++++++++++<input+type="text"+id="Name"+placeholder="Name">
++++++++++++</div>
++++++++</div>|code-block|syntax|javascript|172640|至：|172641|++++++++++++<label+class="control-label"+for="Name">Name</label>

++++++++++++++++<input+type="text"+id="Name"+placeholder="Name">|172642|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.</p>

<pre><code>&lt;div class="control-group"&gt;
            &lt;label class="control-label" for="Name"&gt;Name&lt;/label&gt;
            &lt;div class="controls"&gt;
                &lt;input type="text" id="Name" placeholder="Name"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>to:</p>

<pre><code>            &lt;label class="control-label" for="Name"&gt;Name&lt;/label&gt;

                &lt;input type="text" id="Name" placeholder="Name"&gt;
</code></pre>


blocks|key|4678540|text|是!从div中删除第二个类对我来说很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4678541|<form+class="form-inline+name="+search">
<fieldset>
++++<div+class="form-group">
++++++++<input+name="rego"+id="search_box"+style="text-transform:uppercase"+maxlength="6"+type="text"+class="form-control+input-md"+placeholder="PLATE+NO">
++++++++<input+class="btn+btn-lg+btn-primary"+type="submit"+value="++Programe+Tag++"+/>
++++</div>
</fieldset>++|code-block|syntax|javascript|4678542|​|4678543|至|4678544|<form+class="form-inline+name="+search">
<fieldset>
++++<input+name="rego"+id="search_box"+style="text-transform:uppercase"+maxlength="6"+type="text"+class="form-control+input-md"+placeholder="PLATE+NO">
++++<input+class="btn+btn-lg+btn-primary"+type="submit"+value="++Programe+Tag++"+/>
</fieldset>++|4678545|4678546|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|S|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Yes! removing the second class from the div worked for me. </p>

<pre><code>&lt;form class="form-inline name=" search"&gt;
&lt;fieldset&gt;
    &lt;div class="form-group"&gt;
        &lt;input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO"&gt;
        &lt;input class="btn btn-lg btn-primary" type="submit" value="  Programe Tag  " /&gt;
    &lt;/div&gt;
&lt;/fieldset&gt;  
</code></pre>

<p></p>

<p>to</p>

<pre><code>&lt;form class="form-inline name=" search"&gt;
&lt;fieldset&gt;
    &lt;input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO"&gt;
    &lt;input class="btn btn-lg btn-primary" type="submit" value="  Programe Tag  " /&gt;
&lt;/fieldset&gt;  
</code></pre>

<p></p>


blocks|key|4678572|text|我在form-inline上也遇到过类似的问题。对我来说，form-inline中的input-group致力于将输入和按钮保持在一行相邻的位置，而不是一个叠加在另一个之上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678573|<form+class="form-inline">
++<div+class="input-group">
++++<input+class="form-control+mr-sm-2"+type="search"+placeholder="Search"+aria-label="Search">
++++<button+class="btn+btn-outline-success+my-2+my-sm-0"+type="submit">Search</button>
++</div>
</form>|code-block|syntax|javascript|4678574|entityMap^0|2|B|T|B|16|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>I had similar issue with <code>form-inline</code>. For me <code>input-group</code> within <code>form-inline</code> worked to keep following input and button in a row next to each other instead of one on top of the other.</p>
<pre><code>&lt;form class=&quot;form-inline&quot;&gt;
  &lt;div class=&quot;input-group&quot;&gt;
    &lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
    &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>


<p>I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;
                &lt;form class="form-inline" action="#" method="post"&gt;
                    Search&lt;input type="text" id="search" name="search" class="input-small" placeholder="Search..."&gt;
                    &lt;select id="searchon" name="searchon"&gt;
                        &lt;option value="0"&gt;First Name&lt;/option&gt;
                        &lt;option value="1"&gt;Last Name&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
                &lt;/form&gt;       
          &lt;/div&gt;      
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


Bootstrap form inline not working

我试图添加这个简单的搜索表单，同时应用表单内联类，以便控件显示在彼此的旁边，但我得到的控件显示在彼此的上方，搜索底部显示为白色，看起来很奇怪，所以有人能告诉我这里缺少什么吗？<div class="container">    <div class="row">          <div class="col-md-...

问Bootstrap表单内联不工作
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap表单内联不工作EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap表单内联不工作
EN