要點

Question

我有下面的代碼顯示4個按鈕：

#buttons { 
 
    text-align: center; 
 
    padding-top: 4%; 
 
} 
 

 
#buttons img { 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 10px; 
 
} 
 

 
#buttons p { 
 
    color: #fff; 
 
    font-family: ; 
 
    font-weight: 600; 
 
    font-size:19px; 
 
} 
 

 
#buttons li { 
 
    display: inline-block; 
 
}

<div class="row" id="buttons"> 
 
    
 
    <div class="large-3 small-12 columns"> 
 
<span id="bullets"></span> 
 
     <a href="#was_ist" id="was_ist_anchor"><img src="images/icons/question_icon.png"><p>Was ist Schnittchen</p></a> 
 
    </div> 
 

 
    <div class="large-3 small-12 columns"> 
 
<span id="bullets">&bull;</span> 
 
     <a href="#wo" id="wo_anchor"><img src="images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a> 
 
    </div> 
 

 
    <div class="large-3 small-12 columns"> 
 
<span id="bullets">&bull;</span> 
 
     <a href="#philosophie" id="#philosophie"><img src="images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a> 
 
    </div> 
 

 
    <div class="large-3 small-12 columns"> 
 
<span id="bullets">&bull;</span> 
 
     <a href="#was_erwartet" id="#was_erwartet"><img src="images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a> 
 
    </div> 
 

 
    </div>

的最終結果是：http://www.be-virtual.org/schnittchen

現在我想的要點之間的這種div的像：

它非常重要，res ult是有反應的，並且手機上的子彈點不可見。 有沒有人有想法認識到這一點？

Answer 1

加「&公牛; &公牛; &公牛;」每個按鈕，除了第一個，像這樣：

<div class="large-3 small-12 columns"> 
<span id="bullets1"></span> 
<a href="#was_ist" id="was_ist_anchor"> 
<img src="images/icons/question_icon.png"> 
<p>Was ist Schnittchen</p> 
</a> 
</div> 

<div class="large-3 small-12 columns"> 
<span id="bullets2">&bull;&bull;&bull;</span> 
<a href="#was_ist" id="was_ist_anchor"> 
<img src="images/icons/question_icon.png"> 
<p>Was ist Schnittchen</p> 
</a> 
</div> 

<div class="large-3 small-12 columns"> 
<span id="bullets3">&bull;&bull;&bull;</span> 
<a href="#was_ist" id="was_ist_anchor"> 
<img src="images/icons/question_icon.png"> 
<p>Was ist Schnittchen</p> 
</a> 
</div> 

根據如何迴應式佈局的JavaScript設置，您將需要有條件地設置span元素的顯示爲「在線」或「無」根據網站是否在移動瀏覽器中加載：

if(ismobile){ 
document.getElementById("buttons1").style.display = "none"; 
document.getElementById("buttons2").style.display = "none"; 
document.getElementById("buttons3").style.display = "none"; 
} 
else{ 
document.getElementById("buttons1").style.display = "inline"; 
document.getElementById("buttons2").style.display = "inline"; 
document.getElementById("buttons3").style.display = "inline"; 
} 

Answer 2

您可以使用flex和mediaquerie。 例如

#buttons { 
 
    display:flex; 
 
    text-align:center; 
 
    flex-wrap:wrap; 
 
} 
 
#buttons:before, 
 
#buttons:after {/* you may use also justify-content ... */ 
 
    content:''; 
 
    flex:1;/* will use as much space as possible pushing content into middle */ 
 
} 
 
.dots {/* style these as you wish, made simple for demo */ 
 
    border-top:dotted 6px #AD1616; 
 
    width:1.5em; 
 
    height:3em;/* to set at middle's height of icon*/ 
 
    margin:auto 2em;/* vertical centering and keep some room around */ 
 
} 
 
@media (max-width : 950px) {/* set here your breaking point demo is at 950px */ 
 
    .dots { 
 
    display:none;/* hide dots */ 
 
    } 
 
    #buttons { 
 
    display:block;/* back to regular display to pile icone/links */ 
 
    } 
 
}

<div id="button_bg" class="hide-for-small"> 
 
    <div class="row" id="buttons"> 
 
    
 
    <div class="large-3 small-12 columns"> 
 
     <a href="#was_ist" id="was_ist_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/question_icon.png"><p>Was ist Schnittchen</p></a> 
 
    </div> 
 
    <div class="dots"></div> 
 
    <div class="large-3 small-12 columns"> 
 
     <a href="#wo" id="wo_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a> 
 
    </div> 
 

 
    <div class="dots"></div> 
 
    <div class="large-3 small-12 columns"> 
 
     <a href="#philosophie" id="#philosophie"><img src="http://www.be-virtual.org/schnittchen/images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a> 
 
    </div> 
 

 
    <div class="dots"></div> 
 
    <div class="large-3 small-12 columns"> 
 
     <a href="#was_erwartet" id="#was_erwartet"><img src="http://www.be-virtual.org/schnittchen/images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a> 
 
    </div> 
 

 
    </div> 
 
    </div>

在整頁模式運行段和調整窗口來查看行爲