Question

我要在输入文字旁边放置按钮

※示例[输入文字] [按钮]

并且按钮大小应该固定。

即使窗口大小更改，按钮大小也应固定并且应在输入文本旁边。

下面是我的代码。

<div class="form-group row">
    <div class="col-sm-2">
        <label>...</label>
    </div>
    <div class="col-sm-8">
        <input type="text">
    </div>
    <div class="col-sm-2">
        <button type="button"></button>
    </div>
</div>

此代码可在窗口尺寸较小时使按钮移动。而且还会使按钮变小，从而无法看到按钮内部的值。

我想知道如何按照我的期望进行编码。

Answer 1

如果要移动设备的布局，可以使用col-xs-2 col-xs-8 col-xs-2（如果使用引导3），如果使用引导4，则只能使用col-2 col-8 col-2。但是，如果您的屏幕尺寸很小，则网格会根据您的屏幕尺寸使按钮变小。

Answer 2

由于上一个无效，请尝试这个。

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">Go</button>  
     </div>
  </div>

希望这会有所帮助。

Answer 3

这里，我使用的课程来自引导程序。这样可以解决您的问题

<form style="margin-left: 100px;" >
                <div class="form-group">
                    <label for="uname">Email</label>
                    <input type="email" class="form-control"  name="email" placeholder="Enter your email" style="width: 30%">               
                </div>

                <button type="submit" name="submit" value="Submit" class="btn btn-lg btn-primary btn-block" style="width: 20%;">Log In</button><br>
            </form>

CSS-如何使输入文字旁边的按钮？

3 个答案: