代码之家 › 专栏 › 技术社区 › JvR

边框宽度减小选择窗体控件元素的高度

bootstrap-4 twitter-bootstrap css html

JvR · 技术社区 · 6 年前

设置自定义边框样式和宽度会影响边框的高度 select 包含引导的 form-control 班级。

但是,同一个类不影响 input 元素的高度 窗体控件

看到了吗 this fiddle 复制以下内容:

<div class="row">
  <div class="col-6">
    <input type="text" id="textbox" class="form-control border-foo" />
    Height: <span id="textbox-height"></span>
  </div>
  <div class="col-6">
    <select id="select" class="form-control border-foo">
      <option>test</option>
    </select>
    Height: <span id="select-height"></span>
  </div>
</div>

.border-foo {
  border-style: solid;
  border-width: 30px;
}

我是不是漏课了?

1 回复 | 直到 6 年前

Girisha C 6 年前

重置选择框 appearance 和 height 通过引导程序增值,然后它将按预期工作,请查看下面的工作片段,希望对您有所帮助:)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<style>
  select.form-control.border-foo:not([size]):not([multiple]) {
    height: auto;
  }
  .border-foo {
    border-style: solid;
    border-width: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
</style>
<br>
<div class="row">
  <div class="col-6">
    <input type="text" id="textbox" class="form-control border-foo" />
  </div>
  <div class="col-6">
    <select id="select" class="form-control border-foo">
      <option>test</option>
    </select>
  </div>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前