按钮伸出形状

Button sticking out of form

提问人：Ryolu 提问时间：7/24/2023 最后编辑：com.on.istRyolu 更新时间：7/24/2023 访问量：98

问：

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

enter image description here

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 float-end">Hop In</button>
</form>

html css css-float 引导程序-5 清除修复

评论

答：

1赞 tacoshy 7/24/2023 #1

该问题是由于使用按钮引起的，该按钮会将按钮移出正常流程并浮动它。
只需在容器上使用 Flexbox，即可添加类和 .
之后，您可以通过将类添加到按钮来将按钮推到右侧：float-endflex-direction: columnd-flexflex-columnms-auto

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

评论

0赞 Md. Rakibul Islam 7/24/2023
d-block ms-auto类可能是更简单的解决方案。button
0赞 tacoshy 7/24/2023
@Md.带有按钮的 RakibulIslam 将跨越容器的整个宽度d-block
0赞 Md. Rakibul Islam 7/24/2023
不，它没有。但是，如果您删除您应该检查，则在您的上述方法中确实如此。ms-auto
0赞 Md. Rakibul Islam 7/24/2023 #2

您需要使用 after float 清除浮点。然后它起作用了。clearfix

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

或者你可以用CSS写它：

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


<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

评论

1赞 tacoshy 7/24/2023
虽然这可行，但 float 是错误的类，您需要添加一个空元素来设置样式。这是不干净的，并且降低了可访问性。
0赞 Md. Rakibul Islam 7/24/2023
也许你是对的。但我试图按照他的方法修复它。
1赞 codester_09 7/24/2023 #3

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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); overflow: hidden;" 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>
</form>

评论

0赞 com.on.ist 7/24/2023
这里的问题是“清除错误/浮动错误”。“Clearfix”（带有“：after”元素）的较新变体已经集成到 Bootstrap -> getbootstrap.com/docs/5.2/helpers/clearfix 中
0赞 com.on.ist 7/24/2023 #4

如果你想使用 float 并以引导方式解决它，你应该给父元素一个类 “clearfix”。这修复了加载引导程序时的“clearfix 错误”。

我在表单周围包裹了一个容器，并给它起了类“clearfix”。

由于我认为将 css 样式放在 form-tag 上是不寻常的，所以我将样式从 form-tag 移动到了外部容器。

（通常，表单标签中仅使用发送所需的参数。可能是为了在样式和功能之间创建更精确的分离。至少我不知道“官方规则”。

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


<!-- Body -->
<div class="p-3 rounded-4 clearfix" style="background-color:rgb(192, 242, 255);">
    <form action="/user/loginattempt" 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>
    </form>
</div>

评论

1赞 tacoshy 7/24/2023
设置表单样式没有错。归根结底，它只是一个语义容器。
0赞 com.on.ist 7/24/2023
是的，我在回答中提到了这一点，但在过去的几年里，我从未见过样式化的表单标签。大多数既定的约定都有其目的，即使它不是硬性规定。
0赞 MrUpsidown 7/24/2023
你在说什么惯例？
0赞 MrUpsidown 7/24/2023 #5

一种 （Bootstrap） 方法是从按钮中删除该类，并使用 d-flex 和 justify-content-end 将其包装在元素中。fload-end

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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） 方法是删除该类并将 d-block 和 ms-auto 类添加到您的按钮中，以强制 a 带有自动左边距 （）。fload-enddisplay: block;margin-left: auto;

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

两种方法都达到了完全相同的结果。

上一个：PHPUnit：完全忽略基于 dataProvider 参数的测试

下一个：Jquery如何在DOM中找到浮动元素？