twitter-bootstrap 使用 href 时无法让引导按钮对齐中心

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17214246/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:23:15  来源:igfitidea点击:

Cannot get bootstrap button to align center when working with href

buttontwitter-bootstrap

提问by Giuseppe Migliuri

If I remove the tag the button aligns perfectly but it doesn't link. I've tried multiple combinations with the anchors and no success. Please help.

如果我移除标签,按钮会完美对齐,但不会链接。我已经尝试了多种锚点组合,但都没有成功。请帮忙。

NOT ALIGNING MIDDLE:

不对齐中间:

<div class="span12" style="text-align:center">
    <a href="mailto:[email protected]">
      <button class="btn btn-large btn-primary">Contact us to get started</button>
    </a>
</div>

ALIGNS MIDDLE FINE BUT NO LINK OUT:

对齐中等但没有链接:

<div class="span12" style="text-align:center">
    <button class="btn btn-large btn-primary">Contact us to get started</button>
</div>

回答by Ken Koch

You must have some other CSS conflicting, take a look here with no CSS they both look fine (http://jsfiddle.net/4kZ3p/). Have you used inspect element (https://developers.google.com/chrome-developer-tools/docs/elements)? its a handy tool when debugging CSS.

你一定有一些其他的 CSS 冲突,看看这里没有 CSS,它们看起来都很好(http://jsfiddle.net/4kZ3p/)。您是否使用过检查元素(https://developers.google.com/chrome-developer-tools/docs/elements)?它是调试 CSS 时的一个方便的工具。

Look in the css for the A tag.

在 css 中查找 A 标签。

-Ken

-肯

Needed to add this code to get the jsfiddle to submit but its just your code from above:

需要添加此代码才能提交 jsfiddle,但它只是您上面的代码:

<div class="span12" style="text-align:center">
   <a href="mailto:[email protected]">
      <button class="btn btn-large btn-primary">Contact us to get started</button>
    </a>
</div>

<div class="span12" style="text-align:center">
    <button class="btn btn-large btn-primary">Contact us to get started</button>
</div>

回答by scraaappy

as Ken Koch said, you may have conflict. If you test with Google chrome right click the button, inspect element and select the "a" tag to see how it's affected by css

正如 Ken Koch 所说,你们可能会发生冲突。如果您使用 Google chrome 进行测试,请右键单击该按钮,检查元素并选择“a”标签以查看它是如何受 css 影响的

回答by Prazzy Kumar

Insead of Span use the default col classes of Bootstrap.

Insead of Span 使用 Bootstrap 的默认 col 类。

   <div class="col-lg-12" style="text-align:center">                   
                        <button class="btn btn-large btn-primary">Contact us to get started</button>
                    </div>  

回答by Yanga

In Bootstrap 4:

在 Bootstrap 4 中:

<div class="col-12 text-center">
    <a class="btn btn-outline-primary" href="mailto:[email protected]">Contact us to get started</a>
</div>

回答by damian

If you're using bootstrap just use <a class = "btn btn-large btn-primary">

如果您使用的是引导程序,请使用 <a class = "btn btn-large btn-primary">

And here's a fiddle that works for me. http://jsfiddle.net/HAsPV/

这是一个对我有用的小提琴。 http://jsfiddle.net/HAsPV/

回答by smiley

To bring center the text, you can use col-md-offset-3(number can be used according to the need it helps).

要使文本居中,您可以使用col-md-offset-3(可以根据需要使用数字)。

回答by Tomás Palma

<button type="button" class="btn btn-default center-block">Centered Button</button>