我花了比我愿意承认的更多的时间试图让一行图像成为 row 中的可点击链接。将图像对齐在 row 的中间不会破坏 Bootstrap 的响应能力。链接工作正常，但由于图像大小的变化(尽管它们都是高度紧凑的横向)，对齐方式已关闭。我可以让图像在 div.row 内垂直对齐，但它会破坏响应能力并且图像无法正确调整大小。
Here's a JSFiddle of what I've tried
这是我正在尝试做的事情:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
这是我能想到的最好的:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer这正是我想要实现的目标，但是当我使用它的 CSS 类时，图像不会垂直居中。
我在 Bootstrap 元素中得到的图像都是紧凑的横向图像。尝试在行内垂直对齐图像
我尝试过的:
这是我的开头:
<div class="row vertical-align">
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
</div>
我可以让所有内容都以可点击链接的形式出现在一行中，但是由于图像大小的细微变化，图像不会在行的垂直中心对齐。我添加了这个 vertical-align在普通屏幕上，但它会在窗口调整大小时破坏 Bootstrap 的响应能力。
.vertical-align {
display: flex;
align-items: center;
}
第二次尝试时，我从 div.row 中删除了垂直对齐类并删除了 Bootstrap 的 img-responsive来自 img 的类(class)标签，如下:
<div class="row">
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-1.png"></a></div>
</div>
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-2.png"></a></div>
</div>
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-3.png"></a></div>
</div>
</div>
在我的 CSS 文件中，我添加了这些类:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
上面的 CSS 类不会破坏 Bootstrap，但它们会沿着图像的顶部对齐图像，而不是在 div.row 的垂直中心.
我已经尝试了很多其他的东西，但我无法让它工作。这篇文章看起来充满希望，但我无法让它发挥作用:
How to vertically align an image inside div
我想用 CSS 和 HTML 来解决这个问题，而不是 jQuery。任何关于我正在做的事情的建议都将不胜感激。
最佳答案
Bootstrap 的列默认是 float 的，带有 css float 属性。使用 float，我们不能中间对齐列。但是使用 display: inline-block 我们可以。我们只需要从列的样式中删除 float 并将它们更改为 inline-block 和 vertical-align: middle 就可以了你要。但不要忘记删除 inline-block 附带的额外空间。
这是诀窍。
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<a href="#" title=""><img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive"></a>
</div>
<div class="col-xs-4">
<a href="#" title=""><img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive"></a>
</div>
<div class="col-xs-4">
<a href="#" title=""><img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive"></a>
</div>
</div>
</div>
</div>
注意:设置font-size: 0; letter-spacing: -4px on parent 并应用父级的 font-size: 14px; letter-spacing: 0 返回子元素将删除 inline-block 附带的空白。
关于html - 在 Bootstrap 行的链接中包装图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37692267/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一个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";我尝试了所有不同的路径格式，但它
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注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.
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
Heroku支持人员告诉我，为了在我的Web应用程序中使用自定义字体(未安装在系统中，您可以在bash控制台中使用fc-list查看已安装的字体)我必须部署一个包含所有字体的.fonts文件夹里面的字体。问题是我不知道该怎么做。我的意思是，我不知道文件名是否必须遵循heroku的任何特殊模式，或者我必须在我的代码中做一些事情来考虑这种字体，或者如果我将它包含在文件夹中它是自动的......事实是，我尝试以不同的方式更改字体的文件名，但根本没有使用该字体。为了提供更多详细信息，我们使用字体的过程是将PDF转换为图像，更具体地说，使用rghostgem。并且最终图像根本不使用自定义字体。在
我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path