Question

我在这里遇到一个小CSS问题，我无法理解。

我正在使用“右拉”Bootstrap类来使这些元素在同一条线上：“Se souvenir de moi”和“Mot depasseoublié？”

事实证明，“Mot depasseoublié？”变得无法点击。这是因为他有一个元素......

提前感谢您的帮助。

.container.center-container
  %div.col-lg-4.col-lg-offset-4.custom-jumbotron
    %h2.connexion-title Bienvenue

    = simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
      .form-inputs
        = f.input :email, required: false, autofocus: true, label: false, placeholder: "Email"
        = f.input :password, required: false, label: false, placeholder: "Mot de passe"
        - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
          = link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "pull-right"
        = f.input :remember_me, label: "Se souvenir de moi", as: :boolean if devise_mapping.rememberable?
      .form-actions
        = f.button :submit, "Se connecter", class: "btn btn-lg btn-block btn-orange login-button", style: "background-color:#D5420F; color: white; border: 0;"

-------编辑----

这是纯HTML格式。然后我使用JSbin和2.3.2 Bootstrap库来解决同样的问题：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div class="container center-container">
 <div class="col-lg-4 col-lg-offset-4 custom-jumbotron">
  <h2 class="connexion-title">Bienvenue</h2>
  <div class="form-inputs">
   <div class="form-group email optional user_email">
    <input class="string email optional form-control" autofocus="autofocus" placeholder="Email" type="email" value="" name="user[email]" id="user_email">
   </div>
   <div class="form-group password optional user_password">
    <input class="password optional form-control" placeholder="Mot de passe" type="password" name="user[password]" id="user_password">
   </div>
   <a class="pull-right" href="/users/password/new">Mot de passe oublié ?</a>
   <div class="form-group boolean optional user_remember_me">
    <div class="checkbox">
     <input value="0" type="hidden" name="user[remember_me]">
     <label class="boolean optional" for="user_remember_me">
      <input class="boolean optional" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
      Se souvenir de moi
     </label>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Answer 1

我不熟悉HALM，但是如果你可以改变以下div的display属性

<div class="checkbox">

到inline复选框不会涵盖pull-right的链接。

您可以在css中为其添加一个辅助类，并将其添加到类checkbox的div中。

.display-inline {
  display: inline !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container center-container">
  <div class="col-lg-4 col-lg-offset-4 custom-jumbotron">
    <h2 class="connexion-title">Bienvenue</h2>
    <div class="form-inputs">
      <div class="form-group email optional user_email"><input class="string email optional form-control" autofocus="autofocus" placeholder="Email" type="email" value="" name="user[email]" id="user_email" /></div>
      <div class="form-group password optional user_password"><input class="password optional form-control" placeholder="Mot de passe" type="password" name="user[password]" id="user_password" /></div>
      <a class="pull-right" href="/users/password/new">Mot de passe oublié ?</a>
      <div class="form-group boolean optional user_remember_me"><div class="checkbox display-inline"><input value="0" type="hidden" name="user[remember_me]" /><label class="boolean optional" for="user_remember_me"><input class="boolean optional" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />Se souvenir de moi</label></div></div>
    </div>
  </div>
</div>

右拉元素变为不可点击

1 个答案: