Question

Bootstrap Card是否有内置功能可以像这样在右上方放置字幕？否则，我将不使用Bootstrap卡选项，而仅使用常规的CSS Flex容器。

理想目标：

现有的自举功能：

我看到Bootstrap仅允许在字幕直接位于标题下方的情况下使用此选项。

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Answer 1

我没有在引导程序中直接找到任何此类属性。但这可以通过覆盖一些引导程序来完成。

您可以使用d-inline-block样式的boostrap使标题和字幕排在同一行，然后将字幕更改为向右浮动。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="d-inline-block card-title">Card title</h5>
    <h6 class="d-inline-block card-subtitle text-muted float-right margin-top" style="margin-top:.2rem;">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Answer 2

//Change the Billing Address checkout label
function wc_billing_field_strings( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Billing details' :
            $translated_text = __( 'Your billing info', 'woocommerce' );
            break;
    }
    return $translated_text;
}

add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 );

function shipchange( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Ship to a different address?' :
            $translated_text = __( 'other shipping address?', 'woocommerce' );
            break;
    }
    return $translated_text;
}

.card-subtitle.text-muted {

position: absolute;
right: 1.25em;
margin: 0;
top:2.25em;
background:blue;
color:white !important;
padding:2px;
border-radius:5px;
font-size:10px;
   
}

您可以尝试通过自己的修改来修改引导样式：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

您可能还希望在选择器中使用该其他类：

.card-subtitle {
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    margin: 0;
}

Answer 3

利用Flex容器和它们之间的空间

.flex-container {
  display: flex;
  justify-content: space-between;
}

.card{
  border-width:1px;
  border-style:solid;
  border-color:black;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>



<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="flex-container card-title"><div>Card title</div> <div>Card Subtitle </div></h5>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

引导卡：将字幕放在右上方

3 个答案: