총알 포인트

Question

나는 4 개 버튼 표시하려면 다음 코드가 :이 같은 div의 사이에 난 총알 포인트를 원하는 이제 http://www.be-virtual.org/schnittchen

다음 마지막에 결과

#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>

을 :

매우 중요한 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> 

반응 형 레이아웃 자바 스크립트 설정 방법에 따라 조건부로 "인라인"또는 "없음"에 스팬 요소의 표시를 설정해야합니다 사이트가 모바일 브라우저에로드되고 있는지 여부에 따라 달라집니다.

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>

실행 전체 페이지 모드에서 미리보기 및 창 크기를 조절 행동을`:: before`s과`와