如何爲帶有邊框的圓形響應引導按鈕創建CSS？邊框正在影響像素

我正在用引導程序CSS摔跤，並且無法排隊最後幾個像素。如何爲帶有邊框的圓形響應引導按鈕創建CSS？邊框正在影響像素

我試圖創建一個響應行的圓形圖像，然後是一個圓形鏈接/按鈕添加一個新的圖像。標記是這樣的

<div class="container"> 
    <div class='row'> 
     <div class="col-xs-2"> 
      <a href="/url/to/object"> 
       <img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-2"> 
      <a href="/url/to/object"> 
       <img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg"> 
      </a> 
     </div> 
     <div class="col-xs-2"> 
      <a class="btn btn-default btn-circle btn-responsive" href="#link_to_add_new"> 
       <i class="fa fa-plus"></i> 
      </a> 
     </div> 
    </div> 
</div>

我已經把jssfiddle的CSS的例子。 http://jsfiddle.net/9fgd4972/

正如您所看到的，該按鈕的高度爲1或2像素，這是由於邊框的寬度過大。在css中考慮這個邊界的最好方法是什麼，以便圓圈保持響應。

此外，什麼是最佳方式垂直對齊+文本在該高度。

感謝您的建議。

來源

2015-07-02 Andy Harvey

鏈接現在加入！對不起 –

你可以嘗試用box-shadow改變邊框。

關於垂直對齊，您可以將絕對位置的圖標（+）定位，將所有值設置爲0（頂部，右側，底部，左側），將邊距和高度設置爲自動，並將最大高度設置爲圖標。

像這樣：

box-shadow: 0 0 0 1px #ccc;

和：

position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
padding: 0; 
margin: auto; 
height: auto; 
max-height: 12px;

這裏的工作小提琴：http://jsfiddle.net/alessiozuccotti/14v1f8rk/4/

來源

2015-07-02 13:17:38 Alessio

這裏唯一的問題是+不移動調整大小 – aw04

@alessio謝謝。這是一個好的開始。但底部盒子陰影導致鏈接不再是圓的。當然，我可以添加一個左側的影子，但看起來很亂。這真的是最好的方法嗎？對於線條高度，這可以按當前尺寸工作，但如果圓尺寸發生變化，則無法響應。你有建議如何使這種響應？ –

@ aw04你是對的，對不起，只是更新小提琴：http://jsfiddle.net/alessiozuccotti/14v1f8rk/4/ – Alessio

如何爲帶有邊框的圓形響應引導按鈕創建CSS？邊框正在影響像素

回答

相關問題