Question

我希望登录和注册按钮具有相同的宽度。我希望使用flex或类似的东西来完成，但不要硬编码像素数量。

这是我目前的JSFiddle，https://jsfiddle.net/akap9dq0/。

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-default">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">...</a>
        <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse" type="button">
          <span class="sr-only">toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="main_menu">
        <form class="navbar-form navbar-right" style="border: none;">
          <div id="main_menu_container">
            <div id="main_menu_form_input">
              <input class="form-control" type="text" name="username" placeholder="User name" style="flex:1;">
              <input class="form-control" type="password" name="password" placeholder="Password" style="flex:1;">
            </div>
            <div id="main_menu_form_buttons">
              <input class="btn btn-block btn-success" type="submit" style="flex: 1; margin: 0;" value="login">
              <input class="btn btn-block btn-primary" type="submit" style="flex: 1; margin: 0;" value="register">
            </div>
          </div>
        </form>
      </div>
    </nav>
  </div>
</body>

Answer 1

试试这个：

在useflex类中包装按钮

<div class="useflex">
<input class="btn btn-success" type="submit" name="signinup" value="Sign In">
<input class="btn btn-primary" type="submit" name="signinup" value="Sign Up">
</div>

并应用此样式：

.useflex{
  display: inline-flex;

  max-width:200px;
}

.useflex .btn{
  display: flex;
  flex: 0 0 100%;
}

Answer 2

您可以使用以下CSS实现您的目标：

.control-panel {
  display: inline;
}

.control-panel__btn {
  display: table-cell;
  width: 50%;
  padding-left: 10px;
}

.control-panel__btn .btn {
  width: 100%;
}

和HTML：

<div class="control-panel">
    <div class="control-panel__btn">
        <input class="btn btn-success" type="submit" name="signinup" value="Sign In">
    </div>
    <div class="control-panel__btn">
        <input class="btn btn-primary" type="submit" name="signinup" value="Sign Up">
    </div>
</div>

工作小提琴：https://jsfiddle.net/akap9dq0/6/

Answer 3

只需将自定义类添加到这些按钮并设置宽度。

像

.custom-btn{
  width: 100px;
}

请参阅this

Answer 4

你需要添加css元素

 .btn-success{
 width:100px;
}
.btn-primary{
 width:100px;
}

这样做......

Answer 5

根据文字display: inline-block;

设置尺寸

或者其他方法是给它%宽度。

＆＃13;

.btn {
  width: 30%;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display. -->
      <div class="navbar-header">
        <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse">
          <span class="sr-only">toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">brand</a>
      </div>

      <div class="collapse navbar-collapse" id="main_menu">
        <form class="navbar-form navbar-right" style="border: none; padding: 0;">
          <input class="form-control" type="text" name="username" placeholder="User name">
          <input class="form-control" type="password" name="password" placeholder="Password">
          <input class="btn btn-success" type="submit" name="signinup" value="Sign In">
          <input class="btn btn-primary" type="submit" name="signinup" value="Sign Up">
        </form>
      </div>

    </div>
  </nav>
</body>

＆＃13;

Answer 6

您已经在使用bootstrap，因此将这些引导类添加到您的html元素中将完成您要求的所有内容：

<form class="navbar-form navbar-right row" style="border: none; padding: 0;">         
    <input class="form-control col-xs-12 col-sm-4 col-md-4 col-lg-3" type="text" name="username" placeholder="User name">         
    <input class="form-control col-xs-12 col-sm-4 col-md-3 col-lg-3" type="password" name="password" placeholder="Password">
    <input class="btn btn-success col-xs-12 col-sm-1 col-md-2 col-lg-2 sm" type="submit" name="signinup" value="Sign In0000">
    <input class="btn btn-primary col-xs-12 col-sm-1 col-md-2 col-lg-2 sm" type="submit" name="signinup" value="Sign Up">
</form>

您还需要添加这些类：

@media (min-width: 768px){
.sm{
    width: 20%;
}}

@media (min-width: 768px){
.navbar-form .form-control{
    width: 30%;
}}

Answer 7

如果您需要灵活的方法来使两个按钮的宽度相同，您可能需要JQuery来帮助您。你来了。

＆＃13;

 $(document).ready(function(){
          var success = $(".btn-success");
          var primary = $(".btn-primary");
          var success_width = success.outerWidth();
          var primary_width = primary.outerWidth();
          var both_width;
          

          if( success_width > primary_width || success_width == primary_width ){
              both_width = success_width;
          }else if( primary_width > success_width){
              both_width = primary_width;
          }
          
          success.css({
              width: both_width + "px"
          });
          primary.css({
              width: both_width + "px"
          });
        });

＆＃13;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    

    <script type="text/javascript">
       

    </script>

</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display. -->
      <div class="navbar-header">
        <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse">
          <span class="sr-only">toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">brand</a>
      </div>

      <div class="collapse navbar-collapse" id="main_menu">
        <form class="navbar-form navbar-right" style="border: none; padding: 0;">
          <input class="form-control" type="text" name="username" placeholder="User name">
          <input class="form-control" type="password" name="password" placeholder="Password">
          <input class="btn btn-success" type="submit" name="signinup" value="Sign In" id="btn-success">
          <input class="btn btn-primary" type="submit" name="signinup" value="whynot longer" id="btn-primary">
          <span id="result">&nbsp;</span>
        </form>
      </div>
      
    </div>
  </nav>
</body>
</html>

＆＃13;

希望你能找到自己的方式！

如何让这两个按钮具有相同的宽度？

7 个答案: