Bootstrap是否支持固定宽度的按钮?目前,如果我有2个按钮,“保存”和“下载”,按钮大小根据内容而变化。
还有什么是正确的方式扩展Bootstrap?
Bootstrap是否支持固定宽度的按钮?目前,如果我有2个按钮,“保存”和“下载”,按钮大小根据内容而变化。
还有什么是正确的方式扩展Bootstrap?
当前回答
扩展@kravits88答案:
这将拉伸按钮以适应整个宽度:
<div className="btn-group-justified">
<div className="btn-group">
<button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
<button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>
其他回答
对于您的按钮,您可以为这些特殊类型的按钮创建另一个CSS选择器,具有指定的min-width和max-width。如果你的按钮是
<button class="save_button">Save</button>
在你的引导CSS文件中,你可以创建这样的东西
.save_button {
min-width: 80px;
max-width: 80px;
}
这样,即使你有一个响应式设计,它也应该始终保持80px。
就扩展Bootstrap的正确方式而言,看看这个线程:
延长引导
要做到这一点,你可以提出一个宽度你认为是ok的按钮,然后创建一个自定义类的宽度,并添加到你的按钮,如下所示:
CSS
.custom {
width: 78px !important;
}
然后我可以使用这个类并像这样将它添加到按钮中:
<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>
演示:http://jsfiddle.net/yNsxU/
您可以使用创建的自定义类,并将其放置在您自己的样式表中,该样式表在引导样式表之后加载。我们这样做是因为您在引导样式表中所做的任何更改都可能在更新框架时意外丢失,我们还希望您的更改优先于默认值。
您还可以在按钮上使用.btn-block类,以便它扩展到父类的宽度。
如果父元素是一个固定宽度的元素,按钮将展开以获取所有宽度。可以将现有标记应用于容器,以确保固定/流动按钮只占用所需的空间。
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
<剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <剧本剧本src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / > <铁路链接href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”=“stylesheet - > < div级= span2”> <p><巴顿级=“btn btn-primary btn-block”>保存</按钮></p <p><巴顿级=“btn-success btn-block”>下载</按钮></p> < / div >
这可能是一个愚蠢的解决方案,但我一直在寻找这个问题的解决方案,结果懒惰了。
总之,使用input class="btn…"... 用空格代替button和填充value=属性,这样它们的宽度都是一样的,效果很好。
例如:
<input type="submit" class="btn btn-primary" value=" Calculate "/>
<input type="reset" class="btn btn-primary"value=" Reset "/>
我还没有使用bootstrap很长时间,也许有一个很好的理由不使用这种方法,但我认为我最好分享一下
引导 5+
使用网格列来设置宽度,并使用边距结束工具来设置它们之间的边距:
<div>
Here are two buttons:
<button class="btn btn-primary col-3 me-2">PressMe</button>
<button class="btn btn-primary col-3">PressMeToo</button>
</div>