Question

我my_array = [grouped[1][i]["vals"] for i in range(len(grouped))] div获得<{>}自动调整 height屏幕。 JSFiddle，并尝试调整浏览器大小，width中的buttons会自动调整。

＆＃13;

div

＆＃13;

.btn {
  position: relative;
  border: 0 !important;
  &:focus {
    outline: 0;
  }
  &:hover {
    top: 2px;
  }
  &:active {
    top: 6px;
  }
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-weight: bold !important;
  max-width: 250px;
  width: 100%;
  color: white;
  .border-radius(10);
  .transition(all, 50ms, ease);
  .btn(rgb(204, 204, 204), 20%);
}

.btn(@color, @percent: 10%) {
  border: 0;
  text-shadow: 0px 1px 0px darken(@color, @percent);
  background-color: @color;
  .box-shadow(0px, 6px, 0px, darken(@color, @percent));
  &:hover {
    border: 0;
    background-color: lighten(@color, 5%) !important;
    .box-shadow(0px, 4px, 0px, darken(@color, @percent));
  }
  &:active {
    .box-shadow(inset, 0px, 3px, 0px, darken(@color, @percent));
  }
}

.position {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.btn-container {
  height: 18%;
}

＆＃13;

我想在<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="position"> <div class="btn-container"><button class="btn bg-primary btn-lg">PLAY</button></div> <div class="btn-container"><button class="btn bg-primary btn-lg">SIGN IN</button></div> <div class="btn-container"><button class="btn btn-lg bg-primary">SETTINGS</button></div> <div class="btn-container"><button class="btn bg-primary btn-lg">ABOUT</button></div> </div>中使用div，但问题位于iframe iframe 不是自动根据浏览器大小调整。 JSFiddle。（仅在加载时进行调整，尝试在加载页面后调整浏览器大小）

＆＃13;

div

＆＃13;

Answer 1

要解决此问题，请将按钮的最大宽度设为百分比。然后它工作。现在它固定为250像素。请注意，iframe中的div不会从父框架/窗口继承样式。你必须在div中或iframe的头部内联声明这个宽度...所以不要在父框架的头部。

.btn {max-width: 30%;}

以下是解决方案：https://jsfiddle.net/c7s086tb/4/

自动调整iframe

1 个答案: