Bootstrap: justify-content-center為何在不是flex情況下也有效?

bootstrap css front-end justify-content

crazy 2022-04-13 00:12:41 ‧ 1302 瀏覽

分享至

1.請問justify-content-center，到底需不需要將父容器設為flex? 為何以下即便沒有
d-flex仍然有效果?
2.使用justify-content需要哪些條件才有效?

<form class="needs-validation  " novalidate>
#form 這行"沒有"d-flex時，justify-content-center沒有用?
   <div class="row row-cols-md-2 justify-content-center">
   #不論div這行有沒有d-flex ，justify-content-center都有用?
   ....

listennn08 iT邦高手 5 級 ‧ 2022-04-13 08:47:28 檢舉

row 這個 class 本身就包含 display: flex 了...

crazy iT邦新手 5 級 ‧ 2022-04-13 19:37:33 檢舉

謝謝您! 請問以下這段的意思是在bootstrap 中只有設定為containers, rows, 或columns其一種的就算是flex? 其他的都需要class="d-flex"才算是嗎?

Bootstrap’s grid system uses a series of "containers, rows, and columns" to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2022-04-13 21:40:25

最佳解答

依照名稱來看我想應該很明顯看得出來說明想表示的意思，container 代表的是容器、row 代表是行、column 代表是列，所以這三個加起來是 bootstrap 的網格系統。

那 div 原先是塊級元素，每個 div 會垂直排列，所以要透過 row 去設定並排，column 設定寬度。
那 row 是如何設定並排的呢？
就是使用 display: flex; 這個屬性，也等於 Bootstrap 的 d-flex。

如果對於 class 不了解，我會建議打開 f12 看一下這些 class 包含了哪些 CSS 屬性，再去查找這些 CSS 屬性的效果。

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

crazy iT邦新手 5 級 ‧ 2022-04-14 11:59:02 檢舉

謝謝您

crazy iT邦新手 5 級 ‧ 2022-04-14 13:36:15 檢舉

listennn08
1.想請問為何只有前兩行受justify-content影響而置中呢?
2. .row之後不一定接續.col對嗎?

    <div class="container g-0 bg-primary">
        <div class="row justify-content-center">
            <img src="/img/logo.png" alt=""> #置中
            <div class="card " style="width: 50px; height:20px;"></div> # 置中
            <div>
                <span>hi</span>
            </div>
            <span>hello</span>
        </div>
    </div>

listennn08 iT邦高手 5 級 ‧ 2022-04-14 14:31:20 檢舉

因為 row 有設定底下所有元素預設寬度會是 100%，而寬度只會對塊級元素有作用，你 .card 這個元素又有另外去設定寬度，以上原因會導致看起來只有前面有置中而後面沒有，建議先學 CSS 在使用 Bootstrap，你會比較了解每一種 class 的作用。
row 底下的元素第一層一定要使用 col，不使用可能會導致排版排不出你預期中的樣式，沒有要使用 col 的話可以用 d-flex 就好，因為 BS 的 row 的設定裡面有包含為了讓 col 可以對齊而設定的 margin，所以 grid system 裡面才有寫說 container、row、col 組合成網格系統。