<div class="btn-group text-center" role="group" aria-label="...">
<button type="submit" class="btn btn-lg btn-purple">Baking Needs</button>
<button type="submit" class="btn btn-lg btn-purple">Butter & Margarine</button>
<button type="submit" class="btn btn-lg btn-purple">Cereals</button>
<button type="submit" class="btn btn-lg btn-purple">Chocolates & Sweets</button>
<button type="submit" class="btn btn-lg btn-purple">Desserts</button>
<button type="submit" class="btn btn-lg btn-purple">Jams, Spreads & Honey</button>
<button type="submit" class="btn btn-lg btn-purple">On-The-Go Breakfast</button>
<button type="submit" class="btn btn-lg btn-purple">Snacks</button>
</div>这是输出
但是我需要每个按钮都是http帖子，所以我为每个按钮添加了表单标签
<div class="btn-group text-center" role="group" aria-label="...">
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="4D0GUkUdUmtNh2qszu7jlDdJYN9zkn03VUCqbzTsCXOzsElILKPbZFwHIeFiuDs5YiYAEl9wnOHvSeyG4OvCWGCPnJvfZFyve6agI-kk9IE1"/>
<input type="hidden" value="Baking Needs" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Baking Needs</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="hhbHAlHOALneInNttvDc-kl62hIv7Gb7IzcTTJ3TO_DmcAT3SnO09v0i4vTiuD2TZseIfEVVo1SNxTjIfhNy_Ia5Sj3Z6GA030tjZWGsDUM1"/>
<input type="hidden" value="Butter & Margarine" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Butter & Margarine</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="QTt0sRQAOR5Cgz8bSttkIlXOHqNwz4P5-g6cmabhTDXd6Hsq-tT7wXfsO2ny9siYvYFb216L0sOuClvA0fu05jEMkK_FaEOALuz_A5hwNr01"/>
<input type="hidden" value="Cereals" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Cereals</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="vio4Y6Fbf43AUpQt-ju7mhwqVaNxJIENseV6VMju7WtMawxZqjzKr-589HTVkMUAzpyjdkpG3_oTDaCPwqR4IZ32yjGccJeZnlLOh2FbyTk1"/>
<input type="hidden" value="Chocolates & Sweets" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Chocolates & Sweets</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="f-tNNpOdY4EszpI7vbToaMpWLyEl5HYgvRUFI_LF-XTuQLlturllVKr4nG9U3Xlk8ngJcEqTYwQanf420YIIyV3azoB66X_tIB87gw33RMQ1"/>
<input type="hidden" value="Desserts" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Desserts</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="ob61jF6XaN-6II-w1Nzf9o9q5HOaBbyGfCXEUNpDlyV4Kb9FXywbDDv31LGGt1xFp4XYVVTmhfLmUEu_jFV48i4yZ9qC7IFZhijLgNIgvmQ1"/>
<input type="hidden" value="Jams, Spreads & Honey" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Jams, Spreads & Honey</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="6Fdjn_PX4giauZ2bHBxFWp2oQPzqaZB7v7hmLk3htboLYfMCS_spxb9HtTRlHhdUGqhbqCEtFNUe2INbFTwqDYiQQDRgx68XLUfVNoUS8pQ1"/>
<input type="hidden" value="On-The-Go Breakfast" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">On-The-Go Breakfast</button>
</form>
<form action="/products/Products?Length=8" data-ajax="true" data-ajax-loading="#loader-wrapper" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="totop" data-ajax-update="#target" method="post">
<input name="__RequestVerificationToken" type="hidden" value="uTB3f6J_sN3FMq7BFRjAoiUTR4LmFhWgMD9XHEzeasUJCAPG9YUu2HXU2s2ZmnixEkm253oPCvEGSZ_xTX8PLVAmYmUMsa1-SYYgZC4VUsE1"/>
<input type="hidden" value="Snacks" name="cat2"/>
<input type="hidden" value="1" name="storeid"/>
<input type="hidden" value="Breakfast, Sweets, Snacks & Baking Needs" name="catone"/>
<button type="submit" class="btn btn-lg btn-purple">Snacks</button>
</form>
</div>但结果变成：
有什么办法可以将表单标签和按钮分组保持在一行中？
谢谢
最佳答案
浮动每种形式，使其并排放置，并更改宽度，以使它们的宽度不是100％。
form{
float:left;
display:inline-block; /*-this is so the form is only as wide as its content-*/
width:auto !important;/*-this is to override the width-*/
}
我认为不浮动它们可能会起作用，但是我不太确定Bootstrap样式是如何形成的。
DEMO