javascript - 如何在 Bootstrap 网格列中实现标记/标记所有内容？

Question

在我的代码中我需要这样的东西。

对于网格，我使用了这样的 Bootstrap 网格系统:

<div class= "row">
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
    <div class = "col-xs-06"></div>
</div>

现在单击按钮我必须显示选择。如何做到这一点？

Answer 1

你应该做的是使用 css :after，如果你使用 JQuery，那很容易做到。

据我了解，您需要的是，当单击其中一个 div 时，您会在其右上角显示一个标记(勾号)。所以，2113是复选标记(tick)的代码，您可以在 CSS content 中使用它。

HTML:

<div class="container">
<div class= "row our-div">
    <div class = "col-xs-6">div1</div>
    <div class = "col-xs-6">div2</div>
    <div class = "col-xs-6">div3</div>
    <div class = "col-xs-6">div4</div>
</div>
</div>

CSS:

.active:after{
 font-family: "FontAwesome";
    content: "\2713";
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    background:green;
    border-radius:25px;
    width:18px;
    height:18px;
    text-align:center;
}

.our-div > div{
  height:100px;
  background:purple;
   color:white;
}

JavaScript (JQuery):

$(".our-div div").click(function(){
  $(this).toggleClass('active');
});

DEMO - JSFiddle