Bootstrap 4 HTML中的输入类型文件和不同大小的按钮

发布于 2025-01-23 04:08:51 字数 922 浏览 0 评论 0原文

我在HTML中使用了Bootstrap 4，并且有一个由输入栏和按钮制成的输入框。

我将按钮的大小设置为“ LG”（大），但我无法将输入条设置为相同的大小。

这是我的代码：

<form>
    <div class="input-group">
        <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select File</label>
        </div>
        <div class="input-group-append">
        <button class="btn btn-success btn-lg" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
        </div>
    </div>
</form>

这是结果：

如何将输入栏的大小设置为“ lg”（与按钮相同）？

原文

I'm using Bootstrap 4 in html and I have an input box made of an input bar and a button.

I set the size of the button to "lg" (large) but I can't set the input bar to the same size.

This is my code:

<form>
    <div class="input-group">
        <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select File</label>
        </div>
        <div class="input-group-append">
        <button class="btn btn-success btn-lg" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
        </div>
    </div>
</form>

And this is the result:

How can I set the size of the input bar to "lg" (same as button)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城缀染半城烟沙 2025-01-30 04:08:52

您需要使用.input-group.input-group-lg，如文档所示：
https://getbootstrap.com/doc.com/docs/docs/4.6/components/4.6/components/input-group/input-group /＃sizing

编辑：

在中。您将需要在上覆盖BS样式.custom-file-Label，如下所示：

.input-group-lg .custom-file-label {
  font-size: 1.4rem;
  margin: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<form>
  <div class="input-group input-group-lg">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
      <label class="custom-file-label" for="customFileInput">Select File</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-success" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
    </div>
  </div>
</form>

You need to use .input-group.input-group-lg as shown in the docs:
https://getbootstrap.com/docs/4.6/components/input-group/#sizing

EDIT:

That will not work with a .custom-file-input within the .input-group.
You will need to override the BS styles on .custom-file-label as shown below:

.input-group-lg .custom-file-label {
  font-size: 1.4rem;
  margin: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<form>
  <div class="input-group input-group-lg">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
      <label class="custom-file-label" for="customFileInput">Select File</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-success" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
    </div>
  </div>
</form>

回复收藏 0 原文

夜无邪 2025-01-30 04:08:52

从按钮的类中删除“ BTN-LG”，仅放置边距。

class =“ BTN BTN-Success M-2”

回复收藏 0 原文

已下线请稍等 2025-01-30 04:08:52

对我来说，这用于高度问题：

 .input-group-lg .custom-file-label {
         font-size: 1.25rem;
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file-label::after {
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file + .input-group-append .input-group-text {
         height: calc(1.5em + 1rem + 2px);
    }

For me this worked for height issues:

 .input-group-lg .custom-file-label {
         font-size: 1.25rem;
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file-label::after {
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file + .input-group-append .input-group-text {
         height: calc(1.5em + 1rem + 2px);
    }

回复收藏 0 原文

~没有更多了~