Question

我有一个容器流体，左侧菜单选项为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>

这适用于中小屏幕，但不适用于大屏幕，即最小宽度：1200px。在中小屏幕中，col-lg-2和col-lg-10上下两行。但是对于更大的屏幕，这些是两列，宽度超出了屏幕。

感谢任何帮助。感谢

Answer 1

关闭你的课程。 container-fluid和＆＃39; col-lg-10＆＃39;没有关闭。

＆＃13;

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

＆＃13;

Answer 2

它是你用行嵌套行的方式。在大于1g的装置上，两列col-lg-2＆amp; col-lg-10将位于同一行，足够的宽度可供两个cols占用。但是对于较小的尺寸，一行将用于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 个答案: