问题描述
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<div v-for="job in job">
<div class="text-center">
<h1>{{ job.job_title }}</h1>
<p><strong>Google Inc. </strong> - {{ job.location }}</p>
<h2><u>Job Description</u></h2>
</div>
<p v-html="desc"></p>
<p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
<button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
</div>
</div>
<div class="hidden-sm-down col-md-4"></div>
</div>
</div>
无法弄清楚如何使此按钮居中.在BS 3中,我将仅使用中心块,但这不是BS4中的选项.有什么建议吗?
Can't figure out how to center this button. In BS 3 I would just use center-block but that's not an option in BS4. Any advice?
推荐答案
在Bootstrap 4中,应该使用text-center
类对齐 inline-blocks .
In Bootstrap 4 one should use the text-center
class to align inline-blocks.
注意:在您应用于父元素的自定义类中定义的text-align:center;
都将起作用,而不管您使用的Bootstrap版本如何.这正是.text-center
的适用范围.
NOTE: text-align:center;
defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center
applies.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
</div>
</div>
如果要居中的内容是 block 或 flex (不是inline-
),则可以使用flexbox将其居中:
If the content to be centered is block or flex (not inline-
), one could use flexbox to center it:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<button class="btn btn-default">Centered button</button>
</div>
...,将display: flex; justify-content: center
应用于父级.
... which applies display: flex; justify-content: center
to parent.
注意:请勿使用.row.justify-content-center
而不是.d-flex.justify-content-center
,因为.row
在某些响应间隔上应用负边距,这会导致意外的水平滚动条(除非.row
是.container
的直接子级,它在正确的响应间隔上应用横向填充以抵消负边距).如果出于任何原因必须使用.row
,请使用.m-0.p-0
覆盖其边距和填充,在这种情况下,您最终会得到与.d-flex
几乎相同的样式.
Note: don't use .row.justify-content-center
instead of .d-flex.justify-content-center
, as .row
applies negative margins on certain responsiveness intervals, which results into unexpected horizontal scrollbars (unless .row
is a direct child of .container
, which applies lateral padding to counteract the negative margin, on the correct responsiveness intervals). If you must use .row
, for whatever reason, override its margin and padding with .m-0.p-0
, in which case you end up with pretty much the same styles as .d-flex
.
重要说明:当居中内容(按钮)超过父对象的宽度(.d-flex
)时,第二种解决方案会出现问题,尤其是当父对象具有视口宽度时,特别是因为它使无法水平滚动到内容的开头(最左侧).
因此,当要居中的内容可能变得比可用父级宽度宽并且所有内容都应可访问时,请不要使用它.
Important note: The second solution is problematic when the centered content (the button) exceeds the width of the parent (.d-flex
) especially when the parent has viewport width, specifically because it makes it impossible to horizontally scroll to the start of the content (left-most).
So don't use it when the content to be centered could become wider than the available parent width and all content should be accessible.
这篇关于Bootstrap 4,如何将按钮居中对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!