在引導區域內放置引導按鈕

Question

我試圖用引導來解決樣式問題。我是前端開發新手，我希望你能幫助我解決這個特定的問題。我在淘汰員工名單上進行迭代。對於每位員工，我創建了一種包含3個部分的卡片：部分帶有名稱和按鈕， 圖片，常規信息。這是應該的樣子：

在藍色區域的WITE條紋是我畫出來的員工只是名字。

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}"> 
    <div class="cardPositioning panel panel-primary"> 
     <div class="panel-heading my-panel-heading"> 
      <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3> 
      <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus" ></button> 
     </div> 
     <header> 
      <!--<img width="256" height="256" src="app/Images/horse.jpg">--> 
      <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}"> 
     </header> 
     <footer> 
      <!-- $data.firstName--> 
      <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Role"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Email"></p> 
     </footer> 
    </div> 
</section> 

而CSS

#picturesSection{ 
width: 100%; overflow: hidden; 
} 

.cardPositioning{ 
float: left; 
margin:20px; 
} 

.background-image { 
background-image: url("../Images/back.png"); 
width: 100%; 
z-index: 10; 
background-position-x: 1400px; 
background-position-y: 400px; 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 

.removeButton{ 
margin-bottom: 2px; 
margin-left: 0px; 
margin-right: 0px; 
} 

的問題是如何在按鈕中代表「減」圖標卡位置。我需要一個按鈕從數據庫中刪除僱員。我想在藍色空間的右上角有按鈕。 Bootstrap雖然在面板面板的主要類填充，我不想刪除，因爲僱員（我想保持）的名稱的位置。想知道如何儘可能解決這些問題。提前致謝！

Answer 1

使用引導「右拉式」級上的按鈕，使面板標題「inline-block的」

HTML

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}"> 
    <div class="cardPositioning panel panel-primary"> 
     <div class="panel-heading my-panel-heading"> 
      <h3 class="panel-title cardTitle panel-title-mod" data-bind="text: person.Name"></h3> 
      <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button> 
     </div> 
     <header> 
      <!--<img width="256" height="256" src="app/Images/horse.jpg">--> 
      <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}"> 
     </header> 
     <footer> 
      <!-- $data.firstName--> 
      <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Role"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Email"></p> 
     </footer> 
    </div> 
</section> 

CSS

#picturesSection{ 
width: 100%; overflow: hidden; 

} 

.cardPositioning{ 
float: left; 
margin:20px; 
    position:relative; 
} 

.background-image { 
background-image: url("../Images/back.png"); 
width: 100%; 
z-index: 10; 
background-position-x: 1400px; 
background-position-y: 400px; 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 

.removeButton{ 
margin-bottom: 2px; 
margin-left: 0px; 
margin-right: 0px; 
    position:absolute; 
    right:0; 
    top:0; 
} 

.panel-title-mod { 
    display: inline-block; 
} 

看到這個codepen

http://codepen.io/Arshmeet/pen/oYYRLM

Answer 2

你有沒有試過將類「向右拉」添加到按鈕？

Answer 3

我會建議您嘗試在此的其他問題給出的答案：How can I get my Twitter Bootstrap buttons to right align?

這應該工作，但我沒有測試它：如果失敗

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}"> 
    <div class="cardPositioning panel panel-primary"> 
     <div class="panel-heading my-panel-heading"> 
      <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3> 
      <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button> 
     </div> 
     <header> 
      <!--<img width="256" height="256" src="app/Images/horse.jpg">--> 
      <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}"> 
     </header> 
     <footer> 
      <!-- $data.firstName--> 
      <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Role"></p> 
      <p class="nameEmployeePos" data-bind="text: person.Email"></p> 
     </footer> 
    </div> 
</section> 

，你總是可以使自定義CSS規則的浮動按鈕向右：

.cardPositioning > .panel-heading > button { 
    float: right; 
} 

Answer 4

有多種方法可以做到這一點 -

1-使用上拉右鍵ss按鈕。它扭曲了包裝div。所以把.panel-heading的高度增加到40px;

2-上刪除按鈕類使用position: relative和left : 90%爲期望的結果

https://jsfiddle.net/1t13t988/

Answer 5

你可以試試絕對位置：

#picturesSection .panel-heading { 
     position: relative; 
    } 

    .removeButton{ 
     position: absolute; 
     top: 0; 
     right: 0; 
    } 

這裏有一個code pen