如何讓Bootstrap網格跨度比span1更窄？

Question

我有一個五列的網格。我最初設置爲：

<div class="row"> 
    <div class="span1">...</div> 
    <div class="span3">...</div> 
    <div class="span1">...</div> 
    <div class="span4">...</div> 
    <div class="span1">...</div> 
</div> 

第一列包含兩個圖標中的一個，兩個圖標的寬度相同：18px。 span1解析爲60px，但是，因此存在大量浪費的空間。

如何聲明一個18px的列？

這隻影響我的應用程序的一頁，所以它不足以自定義整個Bootstrap CSS，對吧？

Answer 1

你可以添加你自己的類：

... 
.myspan { 
    width:18px; 
    margin-right:52px; 
} 
... 

然後將該類添加到您的標記：

<div class="row"> 
    <div class="myspan">...</div> 
    <div class="span3">...</div> 
    <div class="span1">...</div> 
    <div class="span4">...</div> 
    <div class="span1">...</div> 
</div> 

甚至使用內嵌CSS（但它是不乾淨的）

<div class="row"> 
    <div class="span1" style="width:18px;margin-right:52px">...</div> 
    <div class="span3">...</div> 
    <div class="span1">...</div> 
    <div class="span4">...</div> 
    <div class="span1">...</div> 
</div> 

每個包含「span」的課程將獲得30px的margin-left，並設置爲float:left你只需要指定margin-right和width屬性。

這是因爲[class*="span"]選擇在bootstrap.css

在這個例子中，我設置的52px保證金右保持電網系統，但你可以改變它爲10px，如果你不想浪費的空間。