我正在实现Bootstrap 4内联块链接,它们之间似乎有一个看不见的边距,我似乎无法删除。
屏幕截图:
Codepen here。
代码:
<div>
<!-- There shoud be NO MARGIN between the links -->
<a href="#" class="btn btn-danger">
Button A</a>
<a href="#" class="btn btn-secondary like-button">
Button B
</a>
</div>
如何摆脱这些无形的边缘?
答案 0 :(得分:1)
您可以使用Bootstrap 按钮组,具体取决于您最终要做的事情。
<div class="btn-group" role="group" aria-label="Basic example">
...you buttons
</div>
请参阅Docs
工作示例:
/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/
body {
padding-top: 50px;
text-align: center;
}
/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#" class="btn btn-danger">Button A</a>
<a href="#" class="btn btn-secondary like-button">Button B</a>
</div>
&#13;
答案 1 :(得分:0)
答案 2 :(得分:0)
那是因为按钮显示为&#34;内联块&#34;。
他们之间有一个空间,而不是边缘。您可以通过删除每个标记之间的空格/换行符来修复它:
WSGIPythonPath "/var/www/QuickSearch/QuickSearch/venv/lib64/python2.7/site-packages"
<VirtualHost *:80>
ServerName 10.0.2.15
WSGIScriptAlias / /var/www/QuickSearch/quicksearch.wsgi
WSGIScriptReloading On
<Directory /var/www/QuickSearch/QuickSearch/>
Order deny,allow
Allow from all
</Directory>
</VirtualHost>
答案 3 :(得分:0)
问题原来是链接之间的HTML中的换行符。我不确定这是故意还是某种浏览器错误。无论如何..删除换行符:
<div>
<!-- There shoud be NO MARGIN between the links -->
<a href="#" class="btn btn-danger">
Button A</a><a href="#" class="btn btn-secondary like-button">
Button B
</a>
</div>