How to hide elements in bootstrap

How to hide elements in bootstrap: 1. Open the corresponding code file; 2. Hide the element in bootstrap by adding the "display:none;" or "visibility:hidden;" style to the element.

The operating environment of this tutorial: windows7 system, bootstrap3 version, Dell G3 computer.

Tips for displaying and hiding DIV

Use bootstrap’s 12-point grid to demonstrate

style="display: none;" Release the occupancy after hiding Page space

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

Method:

<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="max-width:90%" 隐藏后不释放空间
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示

Code:

<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>

Recommended related tutorials ：《bootstrap tutorial》

The above is the detailed content of How to hide elements in bootstrap. For more information, please follow other related articles on the PHP Chinese website!