隐藏部分未正确显示

Question

我有这个隐藏部分 display:none。带有 TextBox 控件的 div 正在使用 col-md-11，但是当切换显示时，该部分看起来只占用了大约 col-md-5。我能做些什么来确保它使用的是正确的 space?

<div class="col-md-11 !important">
     <div class="form-group">
     <label class="control-label source-label">Other</label>
     <input class="form-control" id="enteredOtherSource" name="enteredOtherSource[0].Other" type="text" value="">
     <span class="field-validation-valid text-danger" data-valmsg-for="enteredOtherSource[0].Other" data-valmsg-replace="true"></span>
     </div>
     <input value="91" data-val="true" data-val-number="The field SourceId must be a number." data-val-required="The SourceId field is required." id="otherSourceId" name="enteredOtherSource[0].SourceId" type="hidden">
</div>

Answer 1

display: none 导致页面呈现为好像该元素不存在一样，因此它本应占用的 space 被下一个元素填充。

预留spacevisibility: hidden可以使用

下面的工作代码段显示了三个 div 的集合，其中中间的一个用 display:none 删除或用 visibility:hidden

隐藏

div {
  width: 100%;
  border: 1px solid black;
  background: yellow;
  padding: 3px;
}

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

.container {
  width: 60%;
  padding: 15px;
  background: red;
  border: 1px solid black;
}

<div class='container'>
  Three normal divs, the middle one will have a style applied to hide or make it invisible in the lower panels
  <div>1 - normal div </div>
  <div>2 - none or visibility hidden below</div>
  <div>3 - normal div </div>
</div>
<p> </p>
<div class='container'>
  When using `display:none` the div and its space disappear:
  <div>1 - normal div </div>
  <div class="none">2 - display will be none</div>
  <div>3 - normal div </div>
</div>
<p> </p>
<div class='container'>
  when using `visibility: hidden` the div disappears but its space is reserved:
  <div>1 - normal div </div>
  <div class="hidden">2 - display will be none</div>
  <div>3 - normal div </div>
</div>

隐藏部分未正确显示

Hiddeln section not displaying correctly

javascript

twitter-bootstrap

bootstrap-4