Question

我有一个表单，其中有一个文本框，后面是同一行中的提交按钮。

我希望提交按钮有点小，但文本框会占用剩余的所有宽度。

因此，我只想拉伸文本框以填充所有宽度，但需要按钮所需的宽度。

但是，目前我的用户界面看起来像这样：

注意文本框和按钮之间的所有空水平空间。

我已尝试在CSS中将文本框的宽度设置为100％，但没有任何反应。

以下是我的HTML。

<div class="row" id="rowFormContainer">
    <form id="frm">
        <div id="divUserURLContainer" class="col-md-10">
            <input type="text" 
                   id="txtUserURL" 
                   placeholder="Stack Overflow URL" />
        </div>

        <div id="divGetButtonContainer" class="col-md-2">
            <input type="submit" value="Get" class="btn btn-success"/>
        </div>
    </form>

</div>

正如您所看到的，我正在使用引导类row和md-col-x来定义容器divs的布局。我希望input控件重新显示我的文本框，以填充其容器div的宽度的100％。

这是我的CSS：

#rowFormContainer {
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 10px;

    border-width: 2px;
    border-style: dashed;
}

#divUserURLContainer {
    border-width: 2px;
    border-style: solid;
    border-color: red;

    padding: 0px;
}

#txtUserURL {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: cadetblue;
    font-size: 22px;

    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;

    border-radius: 7px;
    width: 100%;
}

Answer 1

您可以像这样使用flex：

＆＃13;

form {
  display: flex;
}

input[type="text"] {
  flex: 1
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="rowFormContainer">
  <form id="frm">
    <input type="text" id="txtUserURL" placeholder="Stack Overflow URL" />
    <input type="submit" value="Get" class="btn btn-success" />
  </form>
</div>

＆＃13;

Answer 2

您没有正确使用本机引导功能 - 通过添加类 - ＆＃34; form-control＆＃34;根据您的输入，您将获得全宽输入 - 无需求助于flex。请注意，我有.form-group包装并添加了一个标签 - 最好在输入中包含一个标签 - 并且＆＃34; control-label＆＃34; class on on允许bootstrap在出现错误时将其着色为红色（＆＃34; .has-error＆＃34;类应用于表单组。

我在两个div周围添加了边框。不是div中有填充 - 因为这是bootstrap提供的div的自然15px填充 - 不是因为输入没有扩展整个宽度。

在注释引起的疯狂之后 - 我已经删除了填充以显示这种行为的含义 - 只需删除左右填充 - 我不认为这是非常可取的 - 但我接受OP要求div的全宽。无论如何疯狂。

请注意，由于nsnippet编辑器的大小 - 我必须使它成为col-xs-10 / col-xs-2 - 但是通过视口断点可以保持相同的前提。

  <div id="divUserURLContainer" class="col-md-10">
    <div class="form-group">
      <label class="control-label" for="txtUserURL">Label text</label>
      <input type="text" class="form-control" id="txtUserURL" placeholder="Stack Overflow URL" >/>
    </div>
 </div>

＆＃13;

#divGetButtonContainer {
padding-top:24px;
padding-bottom: 16px;
}

#divUserURLContainer,
#divGetButtonContainer {
border: solid 1px red;
padding-left:0;
padding-right:0;
}

 #divGetButtonContainer{
border-color: blue;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
<div id="divUserURLContainer" class="col-xs-10">
  <div class="form-group">
      <label class="control-label" for="txtUserURL">Label text</label>
      <input type="text" class="form-control" id="txtUserURL" placeholder="Stack Overflow URL"/ >
    </div>
  </div>
   <div id="divGetButtonContainer" class="col-xs-2">
     
      <input type="submit" value="Get" class="btn btn-success"/>
    </div>

＆＃13;

获取一个文本框以填充其容器div的100％宽度

2 个答案: