Question

我有一行（div类标记为col-xs-6），其中2列宽度相同。在每列内部，有一个自动调整大小按钮，最大宽度为150px，取决于文本内部的长度。所以我在按钮内输入了很长的文本，因此它们具有相同的最大宽度，即150px。然后我自动调整窗口大小到xs视口，直到一个大小（我认为窗口的宽度小于300px加上填充），然后按钮叠加在一起。

input[type="submit"] {
  position: relative;
  min-height: 34px;
  margin: 0 auto;
  min-width: 80px;
  max-width: 150px;
  padding: 0 10px;
  width: auto;
  display: block;
  border-radius: 5px;
  background-color: #ff7900;
  color: white;
  border: 1px solid #ff7900;
}

.nf-filler-control input[type="submit"] {
  display: inline-block !important;
}

.nf-button {
  display: inline-block;
  position: relative;
  color: white;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div>
  <div style="background:green;" class="col-xs-6">
    <div>
      <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
        <input type="submit" value="As he crossed tosssss sxcffffxxx" />
      </div>
    </div>
  </div>

  <div style="background:red;" class="nf-col col-xs-6">
    <div>
      <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
        <input type="submit" value="As he crossed tosssss sxcffffxxx" />
      </div>
    </div>
    </d

问题是：目前，div标签会自动调整大小，但按钮保持相同的宽度（它们不会与父div标签一起自动调整大小）。所以它们在父div标签之外溢出并相互叠加。

我期待的是：

解决方案1：当我自动调整窗口大小时，div标签自动调整大小，但按钮仍然保持相同的宽度，所以一点，两者都没有足够的空间，所以它应该分成2行（一每行按钮）
解决方案2：当我自动调整窗口大小时，div标签会自动调整大小，然后按钮自动调整大小（它们应始终位于div标签内，而不是溢出）

以下是我的小提琴代码

https://jsfiddle.net/toy56gyf/2/

Answer 1

它不会重新调整尺寸的原因是因为它们具有静态宽度和高度，因为您使用像素作为格式。将px中的所有内容更改为vw和vh。另外，您应该将top: 0px; left: 0px; position absolute;添加到css，然后使用Transform: translate(0-100vw, 0-100 vh);

移动它

这将确保它不会四处移动，并且可以正确调整大小： - ）

按钮覆盖在xs视口中，因为不会自动调整大小

1 个答案: