Question

我试图在移动设备上创建非移动和垂直的水平选择列表。我有两张关于我想要做的事情的图片：

移动：

非移动：

我认为这个html相当简单：

<div class="col-md-6">
   <h4>Radio Buttons</h4>
   <div class="elasticradio">
      <div class="elasticradio-default">
         <input type="radio" name="radio" id="radio1" />
         <label for="radio1">First</label>
      </div>
      <div class="elasticradio-primary">
         <input type="radio" name="radio" id="radio2" checked/>
         <label for="radio2">Second</label>
      </div>
      <div class="elasticradio-success">
         <input type="radio" name="radio" id="radio3" />
         <label for="radio3">Third</label>
      </div>
      <div class="elasticradio-danger">
         <input type="radio" name="radio" id="radio4" />
         <label for="radio4">Fourth</label>
      </div>
      <div class="elasticradio-warning">
         <input type="radio" name="radio" id="radio5" />
         <label for="radio5">Fifth</label>
      </div>
      <div class="elasticradio-info">
         <input type="radio" name="radio" id="radio6" />
         <label for="radio6">Sixth</label>
      </div>
   </div>
</div>

我很难获得改变的方向。我该怎么做？

Answer 1

这并不像琐事那么简单。正如您可能想象的那样，它可以单独使用本机Bootstrap类完成，即没有任何自定义CSS。

这是我的看法：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container">
    <form>
        <div class="form-row mt-4">
            <div class="form-group col-md-3">
                <div class="form-check">
                    <input class="form-check-input d-none" type="checkbox" id="stocks">
                    <label class="form-check-label text-center" for="stocks">
                        <img src="https://picsum.photos/130/" alt="stocks" class="img-thumbnail d-md-none">
                        <img src="https://picsum.photos/222/" alt="stocks" class="img-thumbnail d-none d-md-block">
                        <span class="ml-3 ml-md-0">stocks</span>
                    </label>
                </div>
            </div>
            <div class="form-group col-md-3">
                <div class="form-check">
                    <input class="form-check-input d-none" type="checkbox" id="currencies">
                    <label class="form-check-label text-center" for="currencies">
                        <img src="https://picsum.photos/130/" alt="stocks" class="img-thumbnail d-md-none">
                        <img src="https://picsum.photos/222/" alt="currencies" class="img-thumbnail d-none d-md-block">
                        <span class="ml-3 ml-md-0">currencies</span>
                    </label>
                </div>
            </div>
            <div class="form-group col-md-3">
                <div class="form-check">
                    <input class="form-check-input d-none" type="checkbox" id="commodities">
                    <label class="form-check-label text-center" for="commodities">
                        <img src="https://picsum.photos/130/" alt="stocks" class="img-thumbnail d-md-none">
                        <img src="https://picsum.photos/222/" alt="commodities" class="img-thumbnail d-none d-md-block">
                        <span class="ml-3 ml-md-0">commodities</span>
                    </label>
                </div>
            </div>
            <div class="form-group col-md-3">
                <div class="form-check">
                    <input class="form-check-input d-none" type="checkbox" id="indices">
                    <label class="form-check-label text-center" for="indices">
                        <img src="https://picsum.photos/130/" alt="stocks" class="img-thumbnail d-md-none">
                        <img src="https://picsum.photos/222/" alt="indices" class="img-thumbnail d-none d-md-block">
                        <span class="ml-3 ml-md-0">indices</span>
                    </label>
                </div>
            </div>
        </div>
        
        <button type="submit" class="btn btn-primary">Go</button>
    </form>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

＆＃13;

注意：复选框隐藏在d-none类中，但它们应该可以正常工作。因此，单击图像或文本标签将选中并取消选中该复选框。

使用一点自定义css，然后在选中相应的复选框时，可以对图像应用一些叠加效果/效果/动画。

创建弹性图像按钮集合

1 个答案: