Question

我有一个标准的bootstrap代码，到目前为止结果还不错。我唯一无法工作的是将图像放在彼此之下，而不是彼此相邻。

我的代码：

HTML

<html>
    <head>
        <title>
        </title>
    <link rel="stylesheet" href="css/cece.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
    <form action="#" method="post">
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <label class="image-checkbox">
                    <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
                    <input type="checkbox" name="artikel1" value="" />
                    <i class="fa fa-check hidden"></i>
                </label>
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <label class="image-checkbox">
                    <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
                    <input type="checkbox" name="artikel2" value="" />
                    <i class="fa fa-check hidden"></i>
                </label>
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            </div>
        </div>
          <input type="submit" class="btn btn-success" value="Submit Button">
    </form>
    </body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="js/checkboxes.js?t=<?php time(); ?>"></script>
</html>

CSS

.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.image-checkbox {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
  display: block;
}
.image-checkbox input[type="checkbox"] {
  display: none;
}

.image-checkbox-checked {
  border-color: #4783B0;
}
.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-checkbox-checked .fa {
  display: block !important;
}

的JavaScript

jQuery(function ($) {
        // init the state from the input
        $(".image-checkbox").each(function () {
            if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
                $(this).addClass('image-checkbox-checked');
            }
            else {
                $(this).removeClass('image-checkbox-checked');
            }
        });

        // sync the state to the input
        $(".image-checkbox").on("click", function (e) {
            if ($(this).hasClass('image-checkbox-checked')) {
                $(this).removeClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().removeAttr("checked");
            }
            else {
                $(this).addClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().attr("checked", "checked");
            }

            e.preventDefault();
        });
    });

我得到的结果：https://jsfiddle.net/dLvjj0sc/1/

这意味着我得到这样的结果：

| Image | Image | Image | Image | Submit

我需要的是：

| Image |
| Image |
| Image |
| Image |
| Submit |

这样做的最佳方式是什么？

Answer 1

您可以将所有图片保存在1 col-xs-4之下，而不是创建新的col-xs-4。

jQuery(function ($) {
        // init the state from the input
        $(".image-checkbox").each(function () {
            if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
                $(this).addClass('image-checkbox-checked');
            }
            else {
                $(this).removeClass('image-checkbox-checked');
            }
        });

        // sync the state to the input
        $(".image-checkbox").on("click", function (e) {
            if ($(this).hasClass('image-checkbox-checked')) {
                $(this).removeClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().removeAttr("checked");
            }
            else {
                $(this).addClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().attr("checked", "checked");
            }

            e.preventDefault();
        });
    });

.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.image-checkbox {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
  display: block;
}
.image-checkbox input[type="checkbox"] {
  display: none;
}

.image-checkbox-checked {
  border-color: #4783B0;
}
.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-checkbox-checked .fa {
  display: block !important;
}

<html>
  <head>
    <title>
    </title>
  <link rel="stylesheet" href="css/cece.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>
    <form action="#" method="post">
      <div>
        <div class="col-xs-4 col-sm-3 col-md-2 text-center">
          <label class="image-checkbox">
            <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            <input type="checkbox" name="artikel1" value="" />
            <i class="fa fa-check hidden"></i>
          </label>
          <label class="image-checkbox">
            <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            <input type="checkbox" name="artikel2" value="" />
            <i class="fa fa-check hidden"></i>
          </label>
          <label class="image-checkbox">
            <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            <input type="checkbox" name="artikel3" value="" />
            <i class="fa fa-check hidden"></i>
          </label>
          <label class="image-checkbox">
            <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            <input type="checkbox" name="artikel4" value="" />
            <i class="fa fa-check hidden"></i>
          </label>
          <label>
              <input type="submit" class="btn btn-success" value="Submit Button">
          </label>
        </div>
      </div>      
    </form>
  </body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="js/checkboxes.js?t=<?php time(); ?>"></script>
</html>

Answer 2

您可以尝试将列大小设置为12。

CSS在彼此之下获取图片

2 个答案: