Bootstrap 4 - 无列换行 [英] Bootstrap 4 - no column wrapping

查看：13
本文介绍了Bootstrap 4 - 无列换行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在调整浏览器大小时防止 B4 列换行.这是我的代码:

<div class="card-block"><form class="row"><div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;"><label for="visualTheme" class="control-label">1234</label><div><input class="form-control" style="height:30px;"/>

<div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;"><label class="control-label">5678</label><div><input class="form-control" style="height:30px;"/>

<div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;"><label class="control-label">abcd</label><div><input class="form-control" style="height:30px;"/>

</表单>

小提琴

但是当我把它变小时它仍然会包裹起来.

感谢您的帮助.

解决方案

col-xs-* class is not supported in bootstrap 4 .col-xs-* 在bootstrap 3中使用 所以，它在bootstrap 4中的替换是col-*.

所以你的类 col-xs-4 不适用于 bootstrap 4.所以改用 col-4.

<块引用>

这是带有您的代码的代码.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><div class="card card-outline-primary"><div class="card-block"><form class="row"><div class="col-4" style="border:solid;border-color:red;border-width:5px;"><label for="visualTheme" class="control-label">1234</label><div><input class="form-control" style="height:30px;"/>

<div class="col-4" style="border:solid;border-color:blue;border-width:5px;"><label class="control-label">5678</label><div><input class="form-control" style="height:30px;"/>

<div class="col-4" style="border:solid;border-color:green;border-width:5px;"><label class="control-label">abcd</label><div><input class="form-control" style="height:30px;"/>

</表单>

I need to to prevent B4 columns from wrapping when resizing the Browser. Here is my code:

<div class="card card-outline-primary">
<div class="card-block">
    <form class="row">
        <div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;">
            <label for="visualTheme" class="control-label">1234</label>
            <div>
                <input class="form-control" style="height:30px;"/>
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;">
            <label class="control-label">5678</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;">
            <label class="control-label">abcd</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
     </form>
</div>

Fiddle

But it still wraps when I make it smaller.

Thanks for the help.

解决方案

col-xs-* class is not supported in bootstrap 4 .col-xs-* was used in bootstrap 3 So, Its replacement in bootstrap 4 is col-*.

So your class col-xs-4 is not going to work with bootstrap 4. So use col-4 instead.

Here is the code with your code.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="card card-outline-primary">
  <div class="card-block">
    <form class="row">
      <div class="col-4" style="border:solid;border-color:red;border-width:5px;">
        <label for="visualTheme" class="control-label">1234</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
      <div class="col-4" style="border:solid;border-color:blue;border-width:5px;">
        <label class="control-label">5678</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
      <div class="col-4" style="border:solid;border-color:green;border-width:5px;">
        <label class="control-label">abcd</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
    </form>
  </div>

这篇关于Bootstrap 4 - 无列换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆