bootstrap如何隐藏元素

小编给大家分享一下bootstrap如何隐藏元素，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

bootstrap隐藏元素的方法：首先打开相应的代码文件；然后在bootstrap中通过给元素添加“display:none;”或“visibility:hidden;”样式来隐藏元素即可。

显示和隐藏DIV的技巧

使用bootstrap的12分栅来演示

style="display: none;" 隐藏后释放占用的页面空间

document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

方法：

<div class="form-group">
              <div class="col-lg-3 col-sm-6">
                  <label class="col-sm-4 control-label">{{taskId}}</label>
                  <div class="col-md-8">
                      <input type="text" id="xxx" class="form-control">
                  </div>
              </div>
              <div class="col-lg-3 col-sm-6"  style="display:none;">
                  <label class="col-sm-4 control-label">{{msgId}} </label>
                  <div class="col-sm-8" 　 >
                      <input type="text" id="xxx" class="form-control">
                  </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                  <label class="col-sm-4 control-label">{{createTime}}</label>
                  <div class="xxx   input-group col-sm-8" >
                      <input type="text" id="xxx" class="xxx">
                      <span class="input-group-addon">
                          <i class="fa fa-clock-o bigger-110"></i>
                      </span>
                  </div>
          </div>
          <div class="col-lg-3 col-sm-6">
              <label class="col-sm-4 control-label">{{to}}</label>
              <div  class="xxxe input-group col-sm-8">
                  <input id="xxx"
                      class="xxx">
                  <span class="input-group-addon"> <i
                      class="fa fa-clock-o bigger-110"></i>
                  </span>
              </div>
          </div>
     </div>

style="visibility:hidden;" 隐藏后不释放空间
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示

代码：

<div class="form-group">
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{taskId}}</label>
                                    <div class="col-md-8">
                                        <input type="text" id="xxx" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6"  style="visibility:hidden;">
                                    <label class="col-sm-4 control-label">{{msgId}} </label>
                                    <div class="col-sm-8" 　 >
                                        <input type="text" id="xxx" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{createTime}}</label>
                                    <div class="xxx input-group col-sm-8" >
                                        <input type="text" id="xxx" class="form-control xxx">
                                        <span class="input-group-addon">
                                            <i class="fa fa-clock-o bigger-110"></i>
                                        </span>
                                    </div>
                            </div>
                            <div class="col-lg-3 col-sm-6">
                                <label class="col-sm-4 control-label">{{to}}</label>
                                <div  class="xxx input-group col-sm-8">
                                    <input id="xxx"
                                        class="form-control xxx">
                                    <span class="input-group-addon"> <i
                                        class="fa fa-clock-o bigger-110"></i>
                                    </span>
                                </div>
                            </div>
                       </div>

以上是“bootstrap如何隐藏元素”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！