按钮突出表单

huangapple go评论62阅读模式
英文:

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?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案1

得分: 1

问题是由于在按钮上使用了 float-end,这会将按钮移出正常流并浮动。<br>
只需在容器上使用 Flexbox 并添加类 d-flexflex-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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案2

得分: 1

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

英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案4

得分: 0

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

我在表单周围包裹了一个容器,并给它添加了类"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.

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.)

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案5

得分: 0

第一种方法(Bootstrap)是从按钮中移除 fload-end 类,并将其包裹在一个具有 d-flexjustify-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-blockms-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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

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;).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&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;

<!-- end snippet -->

Both methods achieve the exact same results.

huangapple
  • 本文由 发表于 2023年7月24日 16:42:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/76752751.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定