我想用单选 input 字段 ( http://getbootstrap.com/javascript/#buttons-examples ) 为原始 Bootstrap 的 btn-group-justified 设置样式。
原来的样式是这样的:
但我想让每个按钮都变成方形按钮，并在它们之间留出一些空白。像这样的东西:
我尝试使用 Bootstrap 示例中的一些修改过的 html 标记
[data-toggle="buttons"] .btn>input[type="radio"] {
display: none;
}
.category-select .btn-container {
position: relative;
width: 19%;
padding-bottom: 19%;
float: left;
height: 0;
margin: 1%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-container .btn,
.btn-container .btn input {
max-width: 100%;
}<div class="btn-group-justified category-select" data-toggle="buttons">
<div class="btn-container">
<label class="btn category category-one">
<input type="radio" name="options" id="option1"> One
</label>
</div>
<div class="btn-container">
<label class="btn category category-two">
<input type="radio" name="options" id="option2"> Two
</label>
</div>
<div class="btn-container">
<label class="btn category category-three">
<input type="radio" name="options" id="option3"> Three
</label>
</div>
<div class="btn-container">
<label class="btn category category-four">
<input type="radio" name="options" id="option4"> Four
</label>
</div>
<div class="btn-container">
<label class="btn category category-five">
<input type="radio" name="options" id="option5"> Five
</label>
</div>
</div>
当然，这个 CSS 并没有像我想要的那样为我的按钮设置样式......
我想要实现的功能是有 5 个按钮，水平对齐，响应式(在所有浏览器尺寸下都是方形的)并且像单选按钮组一样工作。
最佳答案
html
<div class="container">
<div class="btn-group blocks" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
CSS
.blocks .btn-primary
{
padding: 24px 12px;
margin: 0 5px;
border-radius: 0;
}
看起来像:
If I apply btn-group-justified class instead of just btn-group, they became justified but still not square-shaped, nor they have margin between them
我不认为没有 btn-group 就可以使用 btn-group-justified 类。虽然当你不使用 btn-group 时它似乎没有什么不同。
btn-group-justified 将显示设置为表格。要在两个单元格之间添加边距，您需要 border-spacing 而不是 margin(参见:Why is a div with "display: table-cell;" not affected by margin?)
现在你有了html:
<div class="container">
<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
CSS:
.blocks .btn-primary
{
padding: 24px 12px;
border-radius: 0;
}
.blocks {border-spacing:5px;}
看起来像:
请注意，您使用的是矩形而不是正方形。 btn-group-justified 将组的总数设置为其父组的 100%。要制作正方形，您需要 jQuery 根据按钮的(内部)宽度设置高度。 (参见:CSS scale height to match width - possibly with a formfactor)
$(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth());
$(window).resize(function(){ $(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); });
关于html - 样式化 Bootstrap btn-group-justified，添加边距和垂直调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19133771/
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.