gpt4 book ai didi

html - Bootstrap - 相对于父 col 的 col 大小

转载 作者:行者123 更新时间:2023-11-28 04:31:56 25 4
gpt4 key购买 nike

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

对不起我的英语,但很难解释:/当基本列采用“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 添加到元素或采用它。 So easy... 效果如图: SOLVED

最佳答案

你好,你能试试这个吗

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

关于html - Bootstrap - 相对于父 col 的 col 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41687327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com