容器在更大屏幕的容器流体中不起作用答案

【问题标题】：Container not working inside contatiner-fluid for larger screens容器在更大屏幕的容器流体中不起作用
【发布时间】：2017-03-25 12:13:30
【问题描述】：

我有一个容器流体，col-lg-2 用于左侧菜单选项，col-lg-10 用于内容部分。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid>
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
        <div class="col-lg-10>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

这适用于中小型屏幕，但不适用于大屏幕，即 min-width: 1200px。在中小屏幕中，col-lg-2 和col-lg-10 上下两排。但是对于更大的屏幕，这是两列，宽度超出了屏幕范围。

感谢任何帮助。谢谢

【问题讨论】：

你可以为这些元素添加 CSS 吗？听起来他们可能有一个带有 float:left 的最大宽度。
它全部由引导程序的 css @Gezzasa 操作
您应该能够编辑 CSS。您提供的信息（除非我不完全理解您的要求）太少，无法提供帮助。
为什么要将事情复杂化并为已有的容器使用网格系统？
查看了引导 CSS 的内部。当您的屏幕超过 1199 像素时，它会实现此 @media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col- lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg -9{浮点数：左}。这与另一种样式在某处减小列的宽度会导致您的问题。

标签： html css twitter-bootstrap

【解决方案1】：

这是您嵌套行的方式。在大于 lg 的设备上，两列 col-lg-2 和 col-lg-10 将位于同一行，有足够的宽度可供两列占用。但是对于较小的尺寸，一行将用于 col-lg-2，下一行用于 col-lg-10。所以最好关闭 col-lg-2 的第一行并为下一个 col-lg-10 使用另一行，以保持每个设备上的一致性。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
        </div>
    </div>
    </div>

【讨论】：

【解决方案2】：

关闭你的课程。 container-fluid 和 'col-lg-10' 没有关闭。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">

    </div>
    <div class="col-lg-10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1 ">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <div class="form-group ">
                            <label for="exampleInputPassword1 ">Password</label>
                            <input type="password " class="form-control " id="exampleInputPassword1 " placeholder="Password ">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

【讨论】：

它已关闭.. 它不仅仅是结构正确......我只想知道容器流体内的嵌套容器是否正常工作......实际上我正在研究 clojure 并写了这个 html只是想了解一下它是否有效......谢谢