css3

0熱度

1回答

我自定義Bootstrap4，但發現很難理解爲什麼事情不按預期工作。導入原始_variables.scss並更改$font-size-base應該工作，否則我們需要將其更改爲14個變量（例如$h1-font-size: $font-size-base * 2.5）。並且在將來當我更新我的「node_modules> bootstrap」時，那麼我不必再檢查$ font-size-base是否已經

-1熱度

1回答

受半透明疊加

CSS邊界不透明度我有這樣的項目： https://jsfiddle.net/3xw9aqew/ 當用戶將鼠標懸停在灰色框，紅色覆蓋帶有綠色邊框/輪廓。但是，此邊框將應用於在懸停時應用不透明度值的疊加層。 .image-container:hover .overlay { opacity: 0.3; } 我想覆蓋到是半透明的，允許下面的圖片可以看到，但我想解決這個

1熱度

2回答

CSS旋轉取決於寬度/固定像素值

TLDR：我想實現這一目標爲可伸縮的解決方案：較長的解釋：目標是有一個與一個梯度作爲背景旋轉的刻度。但問題是旋轉不能定義爲deg，因爲它根據瀏覽器寬度而變化。所以元素應該是100％寬度的瀏覽器，其左側的的固定高度爲，而右側的固定高度爲固定的較低高度。基本上，這可以很容易地完成只有水平伸展的圖像背景。唯一的問題是，應該有也應該在同一地區被裁剪的圖案覆蓋，這應該重複和不舒展（你可以看到這些圖案由

1熱度

1回答

長文本打破我的flexbox佈局

我有兩列。在我的左欄中我有一個p標籤。這個p標籤有很多文字，並且在我的專欄之外非常廣泛。當我刪除我的p標記列布局看起來很好。我試過在p標籤上設置max-width，但是這不是很好的迴應。我希望p標記是col div的100％寬度。我希望文字的寬度達到100％並很好地包裹。 .wrapper { display: flex; flex: 1 0 auto;

0熱度

1回答

CSS Flex - 我有一個項目列表可以需要使他們水平滾動與溢出隱藏

我有一個div內的3項。這個容器需要100％的小部件和水平滾動條。所以就像一個旋轉木馬。 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: flex;

0熱度

2回答

爲什麼媒體查詢中定義的字體顏色不起作用？

爲什麼媒體查詢中定義的字體顏色不起作用？例如， @media (min-width: 576px){ html { color: red !important; font-size: 1.2rem; } } 字體大小有效，但不是顏色即使有！重要。這是引導4

1熱度

1回答

CSS在焦點上添加僞元素

我想顯示焦點上的關閉圖標。它已經在React Bootstrap上懸停顯示，但我希望它在焦點上顯示，並且不顯示圓圈。當我懸停在li tag上時，它顯示關閉圖標（這是使用反應引導程序）。現在我想讓相同的圖標顯示在a tag的焦點上。 Here's the working fiddle. 我的HTML： <div class="test"> <nav class="nav"> <u

0熱度

1回答

CSS的Flex寬度上的文本

的線我不太清楚，如果這是可能的CSS，但沒有找到那個方向什麼，但我會搏一搏：在（Flex的） - 容器我想要多個（2-3）框/列的文本。每一列都是它自己的文章，它有自己的標題，所以它不是一個文本繼續到下一列。但是，我希望所述列的寬度是靈活的，以便沒有列浪費空白空間直到結束。如果一列有空行，它會嘗試減小寬度以爲自己創建更多換行符並填充該空白，而其他框獲得更多寬度以減少文本行數。在任何情況下，所

0熱度

2回答

Bootstrap 4垂直對齊中心無法在柔性佈局上工作

使用Bootstrap 4，我有一個響應式佈局，包含3列，（應該）在不同的屏幕尺寸上更改順序，寬度和水平對齊。它所有的工作，只是在屏幕大小< 768px的IMGS的水平居中對齊不正常工作。這裏是我的代碼： .icon-xl-large { width: 80px; } .w-400px { max-width: 400px; } <link hr

-1熱度

2回答

將列表項目放在兩列中，移位50％

我試圖將列表項放置在兩行中，以便從最下面一行的項目向右移動50％。該項目的順序也很重要，並應該像下面的圖片：下面是代碼，我想出了： https://codepen.io/Deka87/pen/qVgjGv ul { list-style: none; padding-left: 0; margin-bottom: 0; column-cou