Question

我在引导程序布局方面遇到了一些问题。我查看了下面的链接，找到有关情况的一些细节。

How can I get a Bootstrap column to span multiple rows?

但是，我无法弄清楚如何解决这个问题：

----------我有什么----------

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <!-- First row, directions -->
    <div class="row top-buffer">
        <div class="col-md-12">
            <br><br><br><br>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
            <br>
            <form class="form-inline">
                <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                    <a class="btn btn-primary" href="results.html" role="button"> < </a>
                    <a class="btn btn-secondary  " role="button"> 1/3 </a>
                    <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                </div>
            </form>
        </div>
        <div class="col-md-1">
        </div>
        <div class="row">

            <div class="col-md-4">
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <label class="checkbox-inline"><input type="checkbox" value=""></label>
                <br>
                <div class="form-group">
                    <label for="search">Search</label>
                    <input type="text" class="form-control" id="search">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-1"></div>
            <div class="col-md-4">
                <form class="form-inline">
                    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                        <a class="btn btn-primary" href="results.html" role="button"> < </a>
                        <a class="btn btn-secondary  " role="button"> 1/3 </a>
                        <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-1">
        </div>
    </div>
</div>
</body>
</html>

----------我想要什么----------

picture wanted

*注意，扩展框（左侧）应该填满整行

Answer 1

您不能跨越行或列，就像它们是tabe一样。你应该稍微改变你的标记

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

      <style>
        .row { border: 1px solid #f00;}
          [class*="col-"] { border: 1px solid #0f0; }
        </style>

    <div class="container">
        <div class="row top-buffer">
            <div class="col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
                <br>
                <form class="form-inline">
                    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                        <a class="btn btn-primary" href="results.html" role="button"> < </a>
                        <a class="btn btn-secondary  " role="button"> 1/3 </a>
                        <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                    </div>
                </form>
            </div>
            <div class="col-xs-1">
              &nbsp;
            </div>
                <div class="col-xs-4">
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <label class="checkbox-inline"><input type="checkbox" value=""></label>
                    <br>
                    <div class="form-group">
                        <label for="search">Search</label>
                        <input type="text" class="form-control" id="search">
                    </div>
                    <form class="form-inline">
                        <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
                            <a class="btn btn-primary" href="results.html" role="button"> < </a>
                            <a class="btn btn-secondary  " role="button"> 1/3 </a>
                            <a class="btn btn-primary  " href="results.html" role="button"> > </a>
                        </div>
                    </form>
                </div>
        </div>
      </div>

＆＃13;

我将列从md更改为xs只是为了防止它们在代码段内响应。

Bootstrap布局列，双行不占用两行

1 个答案: