本文介绍了Bootstrap 4,如何将按钮居中对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

<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,如何将按钮居中对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:46
查看更多