Question

我有一个面板主体，我想要一个标题居中，一些文字是正确的。

我该怎么办？

＆＃13;

<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>

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

如果我已正确理解您的问题，您可以使用一些自定义样式进行操作，因为bootstrap.css中没有这样的样式：

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

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>

如何在面板主体的右侧制作文本中心和另一个文本

3 个答案: