Question

编辑：我解决了我的问题。底部的解释。

对不起我的英语，但很难解释：/ 当基本列采用“md-4”大小而且太小时，输入子应该断行并变为100％宽度。但是，如果基本列将类更改为“sm-6”，则变大，输入子项应返回内联。

如何解决这个问题？

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #fbb3b3">

        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail" class="col-sm-2 col-xs-2 control-label">Email</label>
            <div class="col-sm-10 col-xs-10">
              <input type="email" class="form-control" id="inputEmail" placeholder="This input should break line, when is too small">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword" placeholder="But if is enough space it should stay inline">
            </div>
          </div>
        </form>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #76ddf3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>

      <div class="col-md-4 col-sm-12 col-xs-12" style="background-color: #fcfa96">
        Try to resize window and you will see what am I talking about.
      </div>
    </div>
  </div>

</body>

编辑：Solition - 我使用javascript函数，它检测表单宽度的变化，并将类col-xs添加到元素或接受它。如此简单......图片效果：

Answer 1

嗨，你可以尝试这个

<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-10 col-xs-offset-1">
        		<div id="form1" class="panel-body">
        			<form role="form"">

        				<div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-tag"  ></i></span>
        					<input class="form-control" type="text" placeholder="Email" />
        				</div>
        				<div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"  ></i></span>
        					<input class="form-control" type="password" />
        				</div>
        				<button type="submit" class="btn btn-success" style="width: 30%;">Login</button>
                        <hr>
                         <a href="forgot_password.php">Forgot Password?</a>
        			</form>
        		</div>
        	</div>

Answer 2

看看这个：http://codepen.io/imcodingideas/pen/QdGwMp?editors=1000，但你可以看到我在这里尝试的内容：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fbb3b3">
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
      </form>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #76ddf3">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, inventore facere eius, corporis dicta reiciendis consequatur, consequuntur rem perferendis obcaecati maiores odit commodi officiis ratione accusamus necessitatibus.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fcfa96">
      <p>Try to resize window and you will see what am I talking about.</p>
    </div>
  </div>
</div>

这是你想要做的吗？请记住，p标签是块级元素。

Bootstrap - col的大小与父col的关系

2 个答案: