jquery - 如何更改 Twitter BootStrap 的 JQuery 密码强度计的位置？

Question

我试图将仪表放置在我的密码字段旁边而不是下方，这是它目前的图像。 像这样放置它的代码是..

<div class="form-group" id="pwd-container">
    <label for="txtPassword" class="control-label col-md-2" id="lblAdministrationAdministratorPassword"><b>Password:</b></label>
    <div class="col-md-6">
        <input id="txtPassword" type="password" class="form-control" name="password" />
    </div>
    <div class="col-sm-4">
        <div class="pwstrength_viewport_progress"></div>
    </div>
</div>

我正在努力让它看起来像这样..

JSFiddle

My Fiddle

Answer 1

您必须将 div、输入和标签分成带有列的单独 div，以便所有内容都位于同一行。

您的格式应如下所示

jQuery(document).ready(function() {
  "use strict";
  var options = {};
  options.ui = {
    container: "#pwd-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
      progress: ".pwstrength_viewport_progress"
    }
  };
  options.common = {
    debug: true,
    onLoad: function() {
      $('#messages').text('Start typing password');
    }
  };
  $(':password').pwstrength(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/ablanco/jquery.pwstrength.bootstrap/master/dist/pwstrength-bootstrap-1.2.7.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
  <div id="pwd-container">
    <div class="form-group row">
      <div class='col-sm-4 col-md-4  col-xs-4'>
        <label for="password">Password</label>
      </div>
      <div class='col-sm-4 col-md-4  col-xs-4'>
        <input type="password" class="form-control" id="password" placeholder="Password" />
      </div>
      <div class='col-sm-4 col-md-4 col-xs-4 pwstrength_viewport_progress'></div>
    </div>
  </div>
  <div class="row">
    <div id="messages" class="col-sm-12"></div>
  </div>
</form>

并使用一些内联样式来设置顶部位置。