＆＃34; COL＆＃34; ＆＃34; row＆＃34;响应

时间：2017-10-17 14:10:08

标签： html twitter-bootstrap bootstrap-4

我正在使用Bootstrap 4，我想做的是下图：

enter image description here

当我试图实现它时，结果如下：

enter image description here

这种情况发生在屏幕宽度大于1200像素的屏幕上。我尝试删除row和col。我还没有发现问题所在。

JS小提琴link here。

<div class="row">
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">

            </div>
        </div>
...

3 个答案:

答案 0 :(得分：2)

在使用网格系统之前，您需要先使用容器。

如果您希望行具有固定宽度，则可以使用.container;如果您希望行数为全宽，则可以使用.container-fluid。

如果您的代码在小提琴中，请将第一个.row类替换为上述两个类之一：

选项1：.container 

<div class="container" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Columns and content of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Columns and content of Row 2 -->
        </div>
    <div>
</div>

在此fiddle中查看此操作。

选项2：.container-fluid 

<div class="container-fluid" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Labels and Inputs of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Labels and Inputs of Row 2 -->
        </div>
    <div>
</div>

在此fiddle中查看此操作。

另见：Grid System (Bootstrap 4 Documentation)

答案 1 :(得分：2)

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  </head>
  <body>   
      <main class="container">
        <div class="row" style="background-color: lightblue">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
        </div>
        <div class="row"  style="background-color: lightskyblue">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <div class="col"></div><div class="col form-control invisible"></div>
            <div class="col"></div><div class="col form-control invisible"></div>
            <div class="col"></div><div class="col form-control invisible"></div>
        </div>
      </main>
  </body>
</html>

答案 2 :(得分：0)

Bootstrap中的列没有响应，因为它们将根据内部（至少不总是）内容进行智能调整。相反，它们会在某些断点处折叠成预定义的宽度。

你的<label>足够长，在某些断点处它不能放在一条线上，所以......它不会。解决这个问题的最简单方法是在HTML中添加其他列断点类。

注意 - 您需要在较大的容器中查看下面的代码段，以了解它是如何折叠/展开的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" style="background-color: lightblue">
   <div class="row">
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>

     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>

     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
    
  </div>
</div>

相关问题
最新问题