パネル本体の右側にテキストの中心と別のテキストを作成する方法

Question

私はパネルの本体を持っており、見出しを中央に、もう少しテキストを正しくしたいと思います。

どうすればいいですか？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading panel_bg text-center"><span>Interests</span> <div class="no_of_category_selected">02/18</div></div> 
 
</div>

すべてのヘルプは素晴らしいことです。

ありがとうございます。

Answer 1

私が正しくあなたの質問を理解している場合はそのようなスタイリングは、このためにbootstrap.cssに存在しないがあるので、あなたはいくつかのカスタムスタイルでそれを行うことができます。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.panel-heading { 
 
    padding-right: 120px; 
 
    padding-left: 120px; 
 
    position: relative; 
 
} 
 
.more-text { 
 
    transform: translateY(-50%); 
 
    position: absolute; 
 
    overflow: hidden; 
 
    height: 20px; 
 
    width: 100px; 
 
    right: 15px; 
 
    top: 50%; 
 
}

<div class="panel panel-default"> 
 
    <div class="panel-heading panel_bg text-center"> 
 
    <span>Interests</span> 
 
    <span class="more-text text-right">02/18</span> 
 
    </div> 
 
</div>

Answer 2

このようにすることができます。

.content{ 
 
    padding-top: 30px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading panel_bg"> 
 
    <div class="text-center"> 
 
     <span>Interests</span> 
 
     <div class="no_of_category_selected pull-right">02/18</div> 
 
    </div> 
 
    <div class="text-right content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ipsum velit eum magnam rerum nobis tempora soluta est impedit corporis iste odio adipisci sint similique sed, repudiandae, unde quisquam, possimus. </p> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 3

.panel-heading panel_bg text-center 
 
{ 
 
    background-color: #999999; 
 
    height: 50px; 
 
    width: 24.5%; 
 
} 
 
.no_of_category_selected 
 
{ 
 
    display:block; 
 
    width:100px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    float:right; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading panel_bg text-center"><span>Interests</span> <div class="no_of_category_selected">02/18</div></div> 
 
</div>