html - 单选按钮作为图像覆盖 Bootstrap 列

Question

我找到了将单选按钮创建为图像的解决方案: https://gist.github.com/rcotrina94/7828886

我想要一个单选按钮图像来覆盖整列，所以我可以用四个单选按钮来覆盖整行，如下所示:example

我尝试更改宽度但没有成功，这是我的代码:https://www.bootply.com/SNl7acRBWW

<div class="row">
    <div class="col-md-3 image-selector">
        <input checked="checked" id="one" name="image" value="one" type="radio">
        <label class="select one" for="one"></label>
    </div>
    <div class="col-md-3 image-selector">
        <input id="two" name="image" value="two" type="radio">
        <label class="select two" for="two"></label>
    </div>
    <div class="col-md-3 image-selector">
        <input id="three" name="image" value="three" type="radio">
        <label class="select three" for="three"></label>
    </div>
    <div class="col-md-3 image-selector">
        <input id="four" name="image" value="four" type="radio">
        <label class="select four" for="four"></label>
    </div>
</div>

Answer 1

您可以使它们绝对定位并使用 top/left/right/bottom 属性拉伸(stretch)它们:

我在这里将 md 更改为 xs，这样我们就可以在代码片段中看到它，无需在您的代码中更改它们

/* CSS used here will be applied after bootstrap.css */
.image-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}



.one{background-image:url(https://placeimg.com/200/100/animals);}
.two{background-image:url(https://placeimg.com/200/100/people);}
.three{background-image:url(https://placeimg.com/200/100/tech);}
.four{background-image:url(https://placeimg.com/200/100/nature);}

.image-selector-2 input:active +.select, .image-selector input:active +.select{opacity: .9;}
.image-selector-2 input:checked +.select, .image-selector input:checked +.select{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.image-selector {
    position:relative;
    min-height:200px!important;
}
.select{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.select:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
	<div class="col-xs-3 image-selector">
      	<input checked="checked" id="one" type="radio" name="image" value="one">
        <label class="select one" for="one"></label>
  	</div>
  	<div class="col-xs-3 image-selector">
      	<input id="two" type="radio" name="image" value="two">
        <label class="select two" for="two"></label>
 	</div>
	<div class="col-xs-3 image-selector">
      	<input id="three" type="radio" name="image" value="three">
        <label class="select three" for="three"></label>
  	</div>
  	<div class="col-xs-3 image-selector">
      	<input id="four" type="radio" name="image" value="four">
        <label class="select four" for="four"></label>
  	</div>
</div>