2023年7月24日 16:42:05go评论67阅读模式

英文:

Button sticking out of form

问题

我有一个看起来像这样的表单：

移除mb-3类不会有任何帮助，它只会移除输入框之间的空格。我应该如何确保按钮保持在蓝色框内？

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">用户名</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="用户名" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="密码" />
  </div>
  <button type="submit" class="btn btn-success float-end">进入</button>
</form>

英文:

I have a form that looks like this:

Removing the mb-3 class does nothing to help, it just removes the spaces between the inputs. How am I supposed to ensure the button stays within the blue box?

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;


&lt;!-- Body --&gt;
&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4&quot; style=&quot;background-color:rgb(192, 242, 255);&quot; method=&quot;POST&quot;&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success float-end&quot;&gt;Hop In&lt;/button&gt;
&lt;/form&gt;

答案1

得分: 1

问题是由于在按钮上使用了 float-end，这会将按钮移出正常流并浮动。<br>
只需在容器上使用 Flexbox 并添加类 d-flex 和 flex-column，设置 flex-direction: column。<br>
之后，您可以通过在按钮上添加类 ms-auto 来将按钮推到右侧：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4 d-flex flex-column" style="background-color: rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success ms-auto">Hop In</button>
</form>

希望这对你有帮助！

英文:

The issue is caused by using float-end on the button which will move the button out of the normal flow and float it. <br>
Simply use Flexbox with flex-direction: column on the container by adding the classes d-flex and flex-column.<br>
After that you can push the button to the right side by adding the class ms-auto to the button:

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;


&lt;!-- Body --&gt;
&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4 d-flex flex-column&quot; style=&quot;background-color:rgb(192, 242, 255);&quot; method=&quot;POST&quot;&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success ms-auto&quot;&gt;Hop In&lt;/button&gt;
&lt;/form&gt;

答案2

得分: 1

'float-end'类使按钮向右浮动，因此我们需要向表单容器添加'overflow: hidden;'以将其保留在蓝色框内。

英文:

The 'float-end' class makes the button float to the right, so we need to add 'overflow: hidden;' to the form container to keep it within the blue box

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;!-- Body --&gt;
&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4&quot; style=&quot;background-color:rgb(192, 242, 255); overflow: hidden;&quot; method=&quot;POST&quot;&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
  &lt;/div&gt;

  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success float-end&quot;&gt;Hop In&lt;/button&gt;
&lt;/form&gt;

答案3

得分: 0

你需要在浮动后使用 clearfix 来清除浮动。然后它就能正常工作。

<div class="clearfix"></div>

或者你可以在CSS中写它：

form::after{
    content: "";
    display: table;
    clear: both;
}

HTML部分如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
    <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Username"/>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password"/>
    </div>
    <button type="submit" class="btn btn-success float-end">Hop In</button>
    <div class="clearfix"></div>
</form>

英文:

You need to clear the float using clearfix after float. Then it works.

&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

Or you can write it in CSS:

form::after{
    content: &quot;&quot;;
    display: table;
    clear: both;
}

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4&quot; style=&quot;background-color:rgb(192, 242, 255);&quot; method=&quot;POST&quot;&gt;
    &lt;div class=&quot;mb-3&quot;&gt;
        &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot;/&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mb-3&quot;&gt;
        &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
        &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot;/&gt;
    &lt;/div&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-success float-end&quot;&gt;Hop In&lt;/button&gt;
    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
&lt;/form&gt;

答案4

得分: 0

如果您想使用浮动并以引导方式解决它，您应该给父元素添加类"clearfix"。这可以解决在加载Bootstrap时出现的"clearfix bug"。

Bootstrap 5.2 文档："Clearfix"

我在表单周围包裹了一个容器，并给它添加了类"clearfix"。

由于我认为在表单标签上添加CSS样式是不寻常的，我将样式从表单标签移到了外部容器。

(通常在表单标签中只使用用于发送的必要参数。这可能是为了在样式和功能之间创建更精确的分离。至少我不知道有"官方规则"。)

英文:

If you want to use float and solve it the bootstrap way, you should give the parent element the class "clearfix". This fixes the "clearfix bug" when you have bootstrap loaded.

Bootstrap 5.2 Documentation: "Clearfix"

I wrapped a container around the form and gave it the class "clearfix".

Since I think it's unusual to put css styles on the form-tag, I moved the styles from the form-tag to the outer container.

(Usually only the parameters needed for sending are used in a form-tag. Probably to create a more precise separation between styling and functionality. An "official rule" is not known to me at least.)

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;


&lt;!-- Body --&gt;
&lt;div class=&quot;p-3 rounded-4 clearfix&quot; style=&quot;background-color:rgb(192, 242, 255);&quot;&gt;
    &lt;form action=&quot;/user/loginattempt&quot; method=&quot;POST&quot;&gt;
        &lt;div class=&quot;mb-3&quot;&gt;
            &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mb-3&quot;&gt;
            &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
            &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
         &lt;/div&gt;
         &lt;button type=&quot;submit&quot; class=&quot;btn btn-success float-end&quot;&gt;Hop In&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;

答案5

得分: 0

第一种方法（Bootstrap）是从按钮中移除 fload-end 类，并将其包裹在一个具有 d-flex 和 justify-content-end 属性的元素内。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <div class="d-flex justify-content-end">
    <button type="submit" class="btn btn-success">Hop In</button>
  </div>
</form>

第二种方法（Bootstrap）是移除 fload-end 类，并在按钮上添加 d-block 和 ms-auto 类，以强制将其设置为 display: block; 并自动添加左侧边距（margin-left: auto;）。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success d-block ms-auto">Hop In</button>
</form>

这两种方法实现的效果完全相同。

英文:

One (Bootstrap) way would be to remove the fload-end class from the button and wrap it inside an element with d-flex and justify-content-end.

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;!-- Body --&gt;
&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4&quot; style=&quot;background-color:rgb(192, 242, 255);&quot; method=&quot;POST&quot;&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;d-flex justify-content-end&quot;&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Hop In&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;

Another (Bootstrap) way would be to remove the fload-end class and add d-block and ms-auto classes to your button to force a display: block; with an automatic left-margin (margin-left: auto;).

&lt;!-- Bootstrap-5 --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;!-- Body --&gt;
&lt;form action=&quot;/user/loginattempt&quot; class=&quot;p-3 rounded-4&quot; style=&quot;background-color:rgb(192, 242, 255);&quot; method=&quot;POST&quot;&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success d-block ms-auto&quot;&gt;Hop In&lt;/button&gt;
&lt;/form&gt;

Both methods achieve the exact same results.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

按钮突出表单

问题

答案1

答案2

答案3

答案4

答案5

如何获取标签的内部HTML或纯文本？

当您点击复选框时，如何使用JavaScript确保输入字段获取数字0？

HTML5 汉堡菜单的动画效果

如何在模态对话框元素打开时进行CSS过渡？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论