blocks|key|4690855|text|您也可以在bs3中使用form-horizontal类。然而，主要的变化是你必须为标签定义列宽度，并且你可以在col-x-x类中组合更多的按钮，作为bs2中的controls，而不是使用form-actions。请参阅this。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4690856|<form+class="form-horizontal"+role="form">
++<div+class="form-group">
++++<label+for="inputEmail3"+class="col-sm-2+control-label">Email</label>
++++<div+class="col-sm-10">
++++++<input+type="email"+class="form-control"+id="inputEmail3"+placeholder="Email">
++++</div>
++</div>
++<div+class="form-group">
++++<label+for="inputPassword3"+class="col-sm-2+control-label">Password</label>
++++<div+class="col-sm-10">
++++++<input+type="password"+class="form-control"+id="inputPassword3"+placeholder="Password">
++++</div>
++</div>
++<div+class="form-group">
++++<div+class="col-sm-offset-2+col-sm-10">
++++++<div+class="checkbox">
++++++++<label>
++++++++++<input+type="checkbox">+Remember+me
++++++++</label>
++++++</div>
++++</div>
++</div>
++<div+class="form-group">
++++<div+class="col-sm-offset-2+col-sm-10">
++++++<button+type="submit"+class="btn+btn-primary">Sign+in</button>++<button+type="submit"+class="btn+btn-default">Cancel</button>
++++</div>
++</div>
</form>|code-block|syntax|javascript|4690857|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#forms-horizontal^0|B|F|1J|7|27|8|2L|C|31|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You can use the <code>form-horizontal</code> class in bs3 also. However, major change is you have to define col width to the label as well as instead of using <code>form-actions</code> you can combine more buttons inside <code>col-x-x</code> class which used as <code>controls</code> in bs2. Please see <a href="http://getbootstrap.com/css/#forms-horizontal" rel="nofollow">this</a>.</p>

<pre><code>&lt;form class="form-horizontal" role="form"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
      &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Password&lt;/label&gt;
    &lt;div class="col-sm-10"&gt;
      &lt;input type="password" class="form-control" id="inputPassword3" placeholder="Password"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-sm-offset-2 col-sm-10"&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input type="checkbox"&gt; Remember me
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-sm-offset-2 col-sm-10"&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;  &lt;button type="submit" class="btn btn-default"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>


blocks|key|4690878|text|bootstrap+3中删除了.form-action，您可以使用form-group在表单末尾添加按钮。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4690879|您可以在同一行中添加更多按钮以形成组：|4690880|<div+class="form-group">
++++++++<div+class="col-sm-offset-2+col-sm-10">+
++++++++++++<input+type="submit"+class="btn+btn-default+btn-lg"+value="Save"+>
++++++++++++<input+type="submit"+class="btn+btn-default+btn-lg"+value="Update"+>
++++++++</div>
++++</div>|code-block|syntax|javascript|4690881|如果您希望按钮具有一些颜色效果或背景颜色，则必须考虑表单组的左右边距为-15px。|4690882|<div+style="background-color:+black;+margin-left:+0px;+margin-right:+0px;"+class="form-group">|4690883|请参阅Bootstrap+3+form+and+form+last+row+background+color|4690884|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/21206335/bootstrap-3-form-and-form-last-row-background-color/21278939#21278939^0|F|C|X|A|0|0|0|0|0|3|1F|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>The <code>.form-action</code> is removed in bootstrap 3. and you can use a <code>form-group</code> to add the buttons at the end of the form.</p>

<p>You can add more buttons to form-group in the same line:</p>

<pre><code>&lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-10"&gt; 
            &lt;input type="submit" class="btn btn-default btn-lg" value="Save" &gt;
            &lt;input type="submit" class="btn btn-default btn-lg" value="Update" &gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>If you want to have some color effect or background color for the buttons, you must consider that the  form-group has a left and right margin of -15px.</p>

<pre><code>&lt;div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group"&gt;
</code></pre>

<p>Please see <a href="https://stackoverflow.com/questions/21206335/bootstrap-3-form-and-form-last-row-background-color/21278939#21278939">Bootstrap 3 form and form last row background color</a></p>


blocks|key|185083|text|导航栏有一个类似的视图|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185084|<nav+class="navbar+navbar-default">
++++<div+class="container-fluid">
++++++++<button+class="btn+btn-primary+navbar-btn">Update</button>
++++++++<button+class="btn+btn-default+navbar-btn">Cancel</button>
++++</div>
</nav>|code-block|syntax|javascript|185085|或者很好|185086|<div+class="well+well-sm">
++++<button+class="btn+btn-primary+navbar-btn">Update</button>
++++<button+class="btn+btn-default+navbar-btn">Cancel</button>
</div>|185087|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>Navbar has a similar view</p>

<pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;button class="btn btn-primary navbar-btn"&gt;Update&lt;/button&gt;
        &lt;button class="btn btn-default navbar-btn"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>Or well</p>

<pre><code>&lt;div class="well well-sm"&gt;
    &lt;button class="btn btn-primary navbar-btn"&gt;Update&lt;/button&gt;
    &lt;button class="btn btn-default navbar-btn"&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></pre>


<p>We upgraded to twitter bootstrap 3 (from 2.3.2) and used .form-horizontal forms with the buttons inside .form-actions class in various places. We searched for similar design or alternatives in the new version to no avail.</p>

<p>If there isnt any option whats the new recomended way of putting two or more buttons (in the same line) at the end of an horizontal form?</p>


form-actions class similar design in twitter bootstrap 3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我们升级到了twitter bootstrap 3(从2.3.2)，并在不同的地方使用了.form-horizontal和.form-actions类中的按钮。我们在新版本中寻找类似的设计或替代方案，但都无济于事。如果没有任何选择，那么将两个或多个按钮(在同一行中)放在水平表单末尾的新推荐方法是什么？

问twitter bootstrap 3中类似的表单操作类设计
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问twitter bootstrap 3中类似的表单操作类设计EN