twitter-bootstrap 如何使标志(使用 flag-icon-css)填充表格单元格?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/38039629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make flag (using flag-icon-css) fill table cell?
提问by user598200
I'm using flag-icon-csson a site.
我flag-icon-css在一个网站上使用。
Here is the generated HTML table row:
这是生成的 HTML 表格行:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="text-center">Location</th>
<th class="text-center">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><span class="flag-icon flag-icon-us"></span></td>
<td class="text-center"><a class="btn btn-primary" href="/view?+16466635449">(646) 663-5449</a></td>
</tr>
</tbody>
</table>
Here is a screenshot:
这是一个屏幕截图:
How can I make the flag larger so it looks more normal, according to the flag-icon-cssit should automatically behave in this way?
根据flag-icon-css它应该自动以这种方式表现,我怎样才能使标志更大,使其看起来更正常?
Looking for a solution without using custom CSS.
寻找不使用自定义 CSS 的解决方案。
This site is using Bootstrap.
本网站正在使用 Bootstrap。
回答by Lipis
In case you are still here.. you should use the flag-icon-backgroundinstead of flag-iconand add it to the parent which is your case is <td>:
如果您仍然在这里..您应该使用flag-icon-background代替flag-icon并将其添加到父级,这是您的情况<td>:
<td class="flag-icon-background flag-icon-us"></td>
And here is the full example:
这是完整的示例:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="text-center">Location</th>
<th class="text-center">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flag-icon-background flag-icon-us"></td>
<td class="text-center"><a class="btn btn-primary" href="/view?+16466635449">(646) 663-5449</a></td>
</tr>
</tbody>
</table>
回答by Aleksandar Milicevic
As far as I know you can target flag-iconclass in your CSS and add the font-sizeand it will make flag larger.
据我所知,您可以flag-icon在 CSS 中定位类并添加font-size,它会使标志更大。


