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

I am trying to have the meter placed beside my password field and not below it, here is the image of it on how it looks right at the moment.. The code that is placing it like this is..

我正在尝试将仪表放在我的密码字段旁边，而不是在它下面，这是它的图像，它现在看起来是正确的..像这样放置它的代码是..

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

And I am trying to get it to look like this..

我试图让它看起来像这样..

JSFiddle

的jsfiddle

My Fiddle

我的小提琴

2 个解决方案

#1

You have to separate the div, input and label into separate divs with columns so that all will stay in same row.

您必须将div，input和label分隔成具有列的单独div，以便所有div保持在同一行中。

Your format should be like below

您的格式应如下所示

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>

And use some inline styles to set top position.

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

#2

<div class="form-group">
                    <label id="lblAdministrationAdministratorPassword" class="control-label col-md-2" for="txtPassword"><b>Password:</b></label>
                    <div class="col-md-6">
                        <input type="password" name="password" class="form-control" id="txtPassword">
                    </div>
                    <div class="col-sm-4">
                        <input type="password" id="rightHere" style="float: left;"><div class="progress" style="float: left;"><div class="progress-bar progress-bar-warning" style="width: 76%;"><span class="password-verdict">Strong</span></div></div>
                    </div>
                </div>

simply add float left and it's done

只需添加浮动左，它就完成了

#1