子弹之间的子弹点

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之间的子弹点：

非常重要的是，结果是响应性的，并且在手机上看不到子弹点。 有谁有想法意识到这一点？

Answer 1

你可以使用flex和mediaquerie。 示例

＆＃13;

＆＃13;

#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 */
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以整页模式运行代码段并调整窗口大小以查看行为

Answer 2

添加＆＃34;＆amp; bull;＆amp; bull;＆amp; bull;＆＃34;每个按钮除了第一个按钮，如下所示：

<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元素的显示设置为＆＃34; inline＆＃34;或＆＃34;无＆＃34;根据网站是否在移动浏览器中加载：

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";
}