如何在我的面板標題的左側和右側添加文本？

我使用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

如何在我的面板標題的左側和右側添加文本？

回答

相關問題