根據屏幕尺寸調整按鈕之間的邊距

Question

我的移動網站上有導航按鈕。 我想根據不同的屏幕尺寸更改按鈕之間的邊距，以使按鈕之間的間隙將按鈕從一端擴展到另一端。 嘗試在CSS按鈕中將邊距設置為auto沒事。

這是按鈕的CSS

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px auto;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;

}

和html代碼

<div id="button">



    <a href='<?php if($prev == "#") { echo $random_url; } else { echo $prev; } ?>' class="button button1" id="prev" title="Previous Pic"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;Prev</a>

                                     <a href='<?php { echo $random_url; } ?>' class="button button1" id="next" title="Random Pic">Random<i class="fa fa-random"></i></a>

                                     <a href='<?php if($next == "#") { echo $random_url; } else { echo $next; } ?>' class="button button1" id="next" title="Random Pic">Next&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></a>

                    </div>

Answer 1

• 媒體查詢

  @media (max-width: 600px) { .button { margin: 10px 10px; // Vertical, Horizontal } }

• 引導網格

將以下類添加到網格.col-offset-*-*

- VW和VH

.button { margin: 1vh 1vw; // Vertical, Horizontal }

我建議使用媒體查詢，因為我假設您已經在使用這些響應式CSS框架或網格系統。