如何将Bootstrap文本框和按钮对齐在同一行？

Question

我可以帮您进行翻译。以下是您需要翻译的内容：

我想把文本框和按钮放在同一行。我正在使用Bootstrap CSS。下面是我正在使用的代码。

HTML：

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

CSS：层叠样式表

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
 }

布局使它成为：

在此输入图像描述

我想要按钮紧跟文本框。

- JimAnkit

Answer 1

你需要给文本框和按钮设置适当的宽度。假设我想让按钮宽80像素，其余部分留给文本框。那么可以这样做。

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display: flex;
   justify-content:space-between;

 }
 .new-meows button{
    width: 80px;
 }
.new-meows input{
    width: calc(100% - 80px)
 }

使用flex的space-between属性可以实现这一点。您也可以使用float。

- No one

---

你好，这是非Bootstrap的方法。如果你想了解使用Bootstrap的做法，请查看下面的链接：https://dev59.com/MGkv5IYBdhLWcg3waAJT不用谢。 - No one

Answer 2

使用 <div class="d inline ">
对你有用

- user223321

---

这个<div>应该放在哪里？ - JimAnkit

Answer 3

我的解决方案与@No one given的类似，但我的有一点不同。无需使用justify-content:space-between;，而是使用flex:1代替width: calc(100% - 80px)。 flex1 属性将自动分配剩余的宽度，而不是计算宽度。

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display:flex;
 }
 .new-meows input {
   flex:1
 }
 .new-meows button {
   width:80px;
 }

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

- Suresh Ponnukalai

Answer 4

按钮和输入框都是块级元素，因此它们默认会占据整个可用的水平空间。您可以将这两个元素都更改为内联块级元素，以便定义您想要任何一个元素占用的宽度。尝试以下 CSS：

.new-meows input {display:inline-block;width:80%;}
.new-meows button {display:inline-block;width:15%;}

您可以将宽度更改为任何值，但请确保总和小于100％。实际上，它应该小于约95％，因为两个元素之间有一个重要的空白区域。

- João Paulo Morais

---

如果您喜欢的话，也可以使用像素（px）。 - João Paulo Morais