ブートストラップで要素を非表示にする方法-ブートストラップのチュートリアル-php.cn

ブートストラップで要素を非表示にする方法

藏色散人

リリース： 2023-02-10 13:40:42

オリジナル

5433 人が閲覧しました

ブートストラップで要素を非表示にする方法: 1. 対応するコードファイルを開きます; 2. 要素に「display:none;」または「visibility:hidden;」スタイルを追加して、ブートストラップで要素を非表示にします。

ブートストラップで要素を非表示にする方法

このチュートリアルの動作環境: Windows7 システム、bootstrap3 バージョン、Dell G3 コンピューター。

DIV の表示と非表示に関するヒント

ブートストラップの 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="max-width:90%" 隐藏后不释放空间
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>

ログイン後にコピー

ブートストラップで要素を非表示にする方法