Question

编写一个超级简单的页面，我在页面中间有一个面板，用于描述其他信息。它一切正常，除了我决定要添加一个带有一些动作按钮的面板页脚;一切都变成了废话。我可以让页脚没有任何明确的位置流动，或者我可以让它停在页面底部，但不是在父面板的底部。我不知道出了什么问题，并且会喜欢第二眼。

免责声明：我有一个邪恶的感冒，我在NyQuil - 如果我拼错了东西，不要感到惊讶:)

＆＃13;

.case-panel-footer-zz {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}

＆＃13;

<div style="border:3px solid blue; padding:10px;height:400px;">
  <!-- border so I can see what's up -->
  <div class="panel panel-default" style="height:60px;border:1px solid pink;">
    <!-- border so I can see what's up -->
    <div class="panel-heading">
      <h4>Select or create case</h4>
    </div>

    <div class="panel-body" id="caseSelector" style="border:1px solid green;">
      <span>the meaty center</span>
      <!-- empty during testing so as not to muddy the test-->
      <!-- I want to eventually resize this box to fit between header and footer, at 100%, padding factored, etc, yada yada yada -->
    </div>

    <div class="panel-footer case-panel-footer" style="height:60px;border:1px solid cyan;">
      <!-- border so I can see what's up -->
      <div>
        do the things
      </div>
      <div class="col-sm-6">
        <button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button>
      </div>
      <div class="col-sm-6 text-right">
        <button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>

＆＃13;

我想这个小提琴链接会起作用。保存/公开似乎全都搞砸了。 https://jsfiddle.net/chornbe/7jfqea56/

删除＆＃34; -z＆＃34;从css应用css并命中运行。

引导板页脚不停放在我期待的地方

0 个答案: