如何在我的Bootstrap 4链接之间删除这些边距?

时间:2016-12-14 01:01:35

标签: css twitter-bootstrap bootstrap-4

我正在实现Bootstrap 4内联块链接,它们之间似乎有一个看不见的边距,我似乎无法删除。

屏幕截图:

image

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>

如何摆脱这些无形的边缘?

4 个答案:

答案 0 :(得分:1)

您可以使用Bootstrap 按钮组,具体取决于您最终要做的事情。

<div class="btn-group" role="group" aria-label="Basic example">
   ...you buttons
</div>

请参阅Docs

工作示例:

&#13;
&#13;
/*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;
&#13;
&#13;

答案 1 :(得分:0)

为按钮添加新类并使用

margin: 0 -4px 0 0;

codepen https://codepen.io/norcaljohnny/pen/BQqroO

答案 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>