blocks|key|170748|text|您可以使用CSS+@media查询来相应地缩放按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170749|@media+(max-width:+768px)+{
++.btn-responsive+{
++++padding:2px+4px;
++++font-size:80%25;
++++line-height:+1;
++}
}

@media+(min-width:+769px)+and+(max-width:+992px)+{
++.btn-responsive+{
++++padding:4px+9px;
++++font-size:90%25;
++++line-height:+1.2;
++}
}|code-block|syntax|javascript|170750|演示：http://bootply.com/93706|offset|length|170751|Bootstrap+4的更新：|style|BOLD|170752|Bootstrap+4+responsive+button+size|170753|entityMap|0|LINK|mutability|MUTABLE|url|http://bootply.com/93706|1|https://stackoverflow.com/questions/44828004/bootstrap-4-responsive-button-size/44829790#44829790^0|0|0|3|O|0|0|C|3|0|0|Y|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|6|7|16|8|@$I|17|J|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

You could use CSS @media queries to scale the buttons accordingly..

<pre><code>@media (max-width: 768px) {
 .btn-responsive {
 padding:2px 4px;
 font-size:80%;
 line-height: 1;
 }
}

@media (min-width: 769px) and (max-width: 992px) {
 .btn-responsive {
 padding:4px 9px;
 font-size:90%;
 line-height: 1.2;
 }
}
</code></pre>

Demo: <a href="http://bootply.com/93706" rel="noreferrer">http://bootply.com/93706</a>

Update for Bootstrap 4: 
<a href="https://stackoverflow.com/questions/44828004/bootstrap-4-responsive-button-size/44829790#44829790">Bootstrap 4 responsive button size</a>

blocks|key|2770589|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2770590|扩展ZimSystem答案..|blockquote|2770591|2770592|@media+(max-width:+768px)+{
++.btn+{
++++font-size:11px;
++++padding:4px+6px;
++}
}

@media+(min-width:+768px)+{
++.btn+{
++++font-size:12px;
++++padding:6px+12px;
++}
}

@media+(min-width:+992px)+{
++.btn+{
++++font-size:14px;
++++padding:8px+12px;
++}
}

@media+(min-width:+1200px)+{
++.btn+{
++++padding:10px+16px;
++++font-size:18px;
++}
}|code-block|syntax|javascript|2770593|entityMap^0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|L|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|M|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|N|7|@]|8|@]|9|$]]|$1|E|3|F|4|G|6|O|7|@]|8|@]|9|$H|I]]|$1|J|3|-4|4|5|6|P|7|@]|8|@]|9|$]]]|K|$]]

<blockquote>
 Expanding ZimSystem answer.. 
</blockquote>

<pre><code>@media (max-width: 768px) {
 .btn {
 font-size:11px;
 padding:4px 6px;
 }
}

@media (min-width: 768px) {
 .btn {
 font-size:12px;
 padding:6px 12px;
 }
}

@media (min-width: 992px) {
 .btn {
 font-size:14px;
 padding:8px 12px;
 }
}

@media (min-width: 1200px) {
 .btn {
 padding:10px 16px;
 font-size:18px;
 }
}
</code></pre>

blocks|key|2983777|text|只是想增加另一个选择。如果你使用的是Bootstrap's+LESS，你也可以使用mixins。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2983778|如果你查看Bootstrap的LESS文件夹(**bootstrap+>+less+>+mixins**)，你会看到buttons.less文件。如果你打开它，你会发现.button-size()混合。|offset|length|style|BOLD|CODE|2983779|2983780|这里是：|2983781|.button-size(
++++vertical+padding;
++++horizontal+padding;
++++font+size;
++++line+height;
++++border-radius
);|code-block|syntax|javascript|2983782|2983783|下面是如何动态创建按钮的：|2983784|您将需要传递某些参数。如果少了一个，它就会刹车|2983785|.button-size(10px;+10px;+1em;+1.5em;+0);|2983786|2983787|下面是一个使用现有Bootstrap+LESS变量的示例：|2983788|++++.btn+{
++++++++@media+(min-width:+@screen-sm-min)+{
++++++++++++.button-size(
++++++++++++++++@padding-small-vertical;
++++++++++++++++@padding-small-horizontal;
++++++++++++++++@font-size-small;
++++++++++++++++@line-height-base;
++++++++++++++++@border-radius-small
++++++++++++);
++++++++}
++++++++@media+(min-width:+@screen-md-min)+{
++++++++++++.button-size(
++++++++++++++++@padding-large-vertical;
++++++++++++++++@padding-large-horizontal;
++++++++++++++++@font-size-large;
++++++++++++++++@line-height-base;
++++++++++++++++@border-radius-large
++++++++++++);
++++++++}
++++}|2983789|entityMap^0|0|M|3|1F|2|1M|C|2C|E|P|P|1M|C|2C|E|0|0|3|1|0|0|0|C|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]|$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|H]|$D|1G|E|1H|F|H]|$D|1I|E|1J|F|H]]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1O|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1Q|8|@$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1T|8|@]|9|@]|A|$]]|$1|V|3|W|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|X|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1W|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|1X|8|@]|9|@]|A|$O|P]]|$1|12|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|13|$]]

Just wanted to add another alternative. If you're using Bootstrap's LESS you can also use the mixins.

If you look inside Bootstrap's LESS folder (<code>bootstrap &gt; less &gt; mixins</code>) you will see the <code>buttons.less</code> file. If you open that up you will find the <code>.button-size()</code> mixin.

<hr>

Here is the mixin:

<pre><code>.button-size(
 vertical padding;
 horizontal padding;
 font size;
 line height;
 border-radius
);
</code></pre>

<hr>

Here's how you dynamically create a button:

You will need to pass certain parameters. It will brake if one is missing 

<pre><code>.button-size(10px; 10px; 1em; 1.5em; 0);
</code></pre>

<hr>

Here's an example using the existing Bootstrap LESS variables:

<pre><code> .btn {
 @media (min-width: @screen-sm-min) {
 .button-size(
 @padding-small-vertical;
 @padding-small-horizontal;
 @font-size-small;
 @line-height-base;
 @border-radius-small
 );
 }
 @media (min-width: @screen-md-min) {
 .button-size(
 @padding-large-vertical;
 @padding-large-horizontal;
 @font-size-large;
 @line-height-base;
 @border-radius-large
 );
 }
 }
</code></pre>

I'm using bootstrap, and the CSS is responsive, so it scales down nicely on smaller devices. However, I would like buttons to shrink too when the viewport is smaller (eg. on mobile).

<pre><code>&lt;button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" &gt;Edit&lt;/button&gt;
</code></pre>

Basically on smaller devices, the class btn-xs should be added to all buttons.

I can probably accomplish this via Jquery, but was wondering if bootstrap already had this functionality?

resize buttons responsively in bootstrap

我使用的是bootstrap，而CSS是响应式的，所以它在较小的设备上可以很好地缩小。然而，我希望按钮缩小时，视口是较小的(例如。在移动设备上)。<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="...

问在引导程序中相应地调整按钮的大小
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在引导程序中相应地调整按钮的大小EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在引导程序中相应地调整按钮的大小
EN