Làm cách nào để thêm văn bản ở bên trái và bên phải của Tiêu đề Bảng điều khiển?

Question

Tôi đang sử dụng Twitter Bootstrap để lấy đi rất nhiều công việc CSS cho tôi. Tôi muốn sử dụng Bảng điều khiển của họ cho một loại "Bài đăng" của Người dùng. Tôi muốn có phần Tiêu đề bao gồm Chỉnh sửa/Xóa Siêu liên kết ở bên RIGHT của Tiêu đề, trong khi Tiêu đề chính nó được căn chỉnh ở bên trái.

Tôi đã thử này không có thành công:

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

Tiêu đề nên được xếp trên bên trái (vì nó không theo mặc định) nhưng tôi muốn các văn bản bổ sung "Hey" để hiển thị trên bên phải .

EDIT: http://getbootstrap.com/dist/css/bootstrap.css

Answer 1

Twitter bootstrap có hai lớp có thể giúp bạn.

Đầu tiên là .text-right và thứ hai là .pull-right để thêm hai lớp này và xem.

Answer 2

Thêm float:right và loại bỏ text-align: right

.text-right { 
    float:right; 
} 

Answer 3

Nút trái và phải trong tiêu đề bảng điều khiển. Bạn có thể thay thế các nút này bằng các liên kết.

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

Answer 4

nhỏ clearfix làm nó

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

Bạn có thể thử nó ở đây http://jsfiddle.net/b1Lec5ge/

Answer 5

giải pháp làm việc cho câu hỏi

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

Mỗi phần của bảng điều khiển có thể chứa hàng (s) với 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> 

Ở đây bạn có một đoạn mã với col-xs-xxx cho màn hình nhỏ nhỏ. Tài liệu 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>

Answer 6

Tôi nghĩ rằng đây có thể giúp quá. Bạn có thể sử dụng cả hàng và cột bootstrap để chia bảng thành hai, như tôi đã làm ở đây:

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