根据列表计数显示/隐藏div

Question

我试图根据列表计数显示/隐藏div（列表在后面的代码上）＆＃34; async＆＃34;。我的意思是，我希望它显示列表中有多于0个项目，并在没有项目时隐藏。现在我有这个：

<div class="col-xs-3" style="padding:0; margin:0 0 0 1%;">
        <div class="@((Repository.Reservation.BookedRooms.Count>0)?"visible":"hidden")">

            <div style="background-color:red; width:20px; height:20px;"></div>
        </div>
    </div>

但这仅适用于页面渲染。有没有办法做到这一点，而不必诉诸于JavaScript，只有CSS / bootstrap？

我可以在javascript按钮单击事件上执行此操作我必须添加/删除项目，但如果我只使用CSS / bootstrap（我的意思是，如果它更简单，那么它会更简单）疗程）。