Question

我正在使用bootstrap的表单控件，我希望能够创建一组可折叠的输入元素，每个输入元素称为一个部分，并且这些部分周围有一个边框。

但是，部分内的输入元素不会扩展中型或大型显示器的整个宽度，所以我不希望边框扩展整个屏幕宽度。

我知道我可以使用:: after伪类来使边框不延伸整个宽度，但实际宽度需要响应。

有没有办法以伪样式合并引导媒体查询？

或者有更简单的方法来实现我想要的目标吗？

另一个问题是，通过使用col-md-xx将div包装在div中，div中的所有内容（所有行）都会继承新的宽度，这也是一个问题。

以下是我到目前为止提出的示例代码：

<form class="form-horizontal">
  <div class="col-md-12">
    <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email </label>
    <div class="col-md-6">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  </div>
  <div class=" col-md-12 q collapse in">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email 2</label>
    <div class="col-md-6">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email 3</label>
    <div class="col-md-6">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  </div>

  <div class="form-group "></div>
  <div class="form-group ">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-md-6">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>

</form>

这是风格：

div.q:after {
    content: "";
    position: absolute;
    left: 9%;
    bottom: 10px;
    top: -10px;
    height: 100%;
    width: 60%;  /* or 100px */
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: black;
    border-radius: 0px;
    padding: 50px; 
}

宽度不能设置为固定数字，无论是百分比还是px，因为在小型设备上边框应为100％。

为每个标签/输入div添加边框样式是否更容易，而不是尝试将这些部分包装在div中？

引导边框围绕一组不扩展整个宽度的表单组div

0 个答案: