如何在我的面板标题的左侧和右侧添加文本？

我使用Twitter Bootstrap为我带走了很多CSS工作。我想用他们的面板作为用户的一种“发布”。我希望标题部分在标题的右侧包含编辑/删除超链接，而标题本身在左侧对齐。如何在我的面板标题的左侧和右侧添加文本？

我没有成功尝试这样做：

<div class="row"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">@vModel.Title <span class="text-right">Hey</span></h3> 
     </div> 
     <div class="panel-body"> 
      @vModel.Blog 
     </div> 
    </div> 
</div>

标题应该在左边对齐（因为它在默认情况下），但我想要的附加文本“嘿”，以显示在右侧。

编辑： http://getbootstrap.com/dist/css/bootstrap.css

来源

2013-08-21 Tada

你尝试使用明确：对上面板的标题和正文右类代码的标题 – Hive7

粘贴代码。并尝试在文本正确的类中添加float：right。 –

Twitter的引导有两个类，它可以帮助你。

首先是.text-right第二个是.pull-right所以加这两个类就可以了。

来源

2013-08-21 09:04:32

pull-right作品，但为什么.text-right不工作？ – Tada

，因为右移实际上是将整个元素浮动到右侧......其中，文本对齐只是将元素的特定宽度中的文本设置为右侧。 –

我讨厌浮动，但这似乎是迄今为止发现的最佳方式:-( – linuxdan

添加float:right和删除text-align: right

.text-right { 
    float:right; 
}

来源

2013-08-21 09:02:47

不要这样做！你（几乎）不想在另一个库的源代码中工作。相反，看看是否已经存在，否则创建自己的类。在这种情况下，'.pull-right'类已经存在，这正是你所做的'.text-right'所做的。 – Koen

面板标题中的左右按钮。您可以用链接替换这些按钮。

<div class="panel-heading text-right"> 
    <div class="nav"><!-- clears floated buttons --> 

    <div class="btn-group pull-left" data-toggle="buttons"> 
     <label class="btn btn-default"> 
     <input type="checkbox" autocomplete="off"><i class="fa fa-toggle-on"></i> 
     </label> 
    </div> 

    <div class="btn-group pull-right" data-toggle="buttons"> 
     <label class="btn btn-default"> 
     <input type="checkbox" autocomplete="off"><i class="fa fa-trash"></i> 
     </label> 
    </div> 

    </div> 
</div>

来源

2015-08-30 14:43:15 ymakux

微小clearfix做它

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title pull-left"> 
      Works fine for me! 
     </div> 
     <div class="panel-title pull-right">Text on the right</div> 
     <div class="clearfix"></div> 
    </div> 
    <div class="panel-body">Panel content</div> 
</div>

你可以在这里http://jsfiddle.net/b1Lec5ge/

来源

2016-03-16 15:34:35 Pangur

感谢您使用clearfix命令。布局真的很愚蠢，没有它：D –

这是它感谢，并没有打破标题 – Geomorillo

尝试与合作解决方案的问题

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="row"> 
      <div class="col-md-4 text-left panel-title">@vModel.Title</div> 
      <div class="col-md-8 text-right"><a>hyperlink1</a> <a>hyperlink2</a></div> 
     </div> 
    </div> 
    <div class="panel-body"> 
     ... 
    </div> 
</div>

面板的每个部分都可以容纳行（S） col-xx-xx

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="row"> 
      <div class="col-md-4 text-left">Header left</div> 
      <div class="col-md-4 text-center">Header center</div> 
      <div class="col-md-4 text-right">Header right</div> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-6 text-right">Body left align right</div> 
      <div class="col-md-6 text-left">Body right align left</div> 
     </div> 
    </div> 
    <div class="panel-footer"> 
     <div class="row"> 
      <div class="col-md-3 text-center">Footer 1/4 center</div> 
      <div class="col-md-3 text-center">Footer 2/4 center</div> 
      <div class="col-md-3 text-center">Footer 3/4 center</div> 
      <div class="col-md-3 text-center">Footer 4/4 center</div> 
     </div> 
    </div> 
</div>

在这里你有一个snipplet与col-xs-xxx匹配小屏幕。文档here。

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

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <div class="row"> 
 
      <div class="col-xs-4 text-left">Header left</div> 
 
      <div class="col-xs-4 text-center">Header center</div> 
 
      <div class="col-xs-4 text-right">Header right</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-6 text-right">Body left align right</div> 
 
      <div class="col-xs-6 text-left">Body right align left</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 text-center">Footer 1/4 center</div> 
 
      <div class="col-xs-3 text-center">Footer 2/4 center</div> 
 
      <div class="col-xs-3 text-center">Footer 3/4 center</div> 
 
      <div class="col-xs-3 text-center">Footer 4/4 center</div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2016-12-14 10:42:11 Camille

我觉得这也可以帮助你。您可以同时使用自举的行和列划分面板一分为二，像我一样在这里：

<div class="panel panel-default"> 

    <div class="panel-body"> 

     <div class="row"> 

      <div class="col-md-6"> 

       <p>Text on left</p> 

      </div> 

      <div class="col-md-6"> 

       <p>Text on right</p> 

      </div> 

     </div> 

    </div> 

</div>

来源

2017-06-09 22:53:38 arksnorman

如何在我的面板标题的左侧和右侧添加文本？

回答

相关问题