Question

我想实现这些目标：

计算机视图

Object.prototype.valueOf

平板电脑纵向视图

移动人像视图

目前我有以下代码，其中＆＃34;家庭内容＆＃34; part将生成项目＃1-items＃X：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
    <link rel="stylesheet" href="index.css">
    <script src="../_lib/jquery/jquery.min.js"></script>
    <script src="../_lib/jquery/jquery.fittext.js"></script>
    <script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
    <title></title>
</head>
<body>
<script>
    init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="home-noti">
                <div class="news-noti">
                    <div class="news-panel panel">
                        <div class="news-title panel-heading">
                            <h2 class="panel-title">NEWSFLASH!</h2>
                        </div>
                        <div class="news-items-wrapper">
                            <ul id="news-items" class="news-items list-group"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div id="home-content" class="home-content"></div>
        </div>
    </div>
</div>


</body>
</html>

这段代码可以实现＆＃34;计算机视图＆＃34;和＆＃34;平板电脑纵向视图＆＃34;。我本可以使用4＃＆＃34; col-md-3＆＃34;但这有时意味着我可能会在同一行上获得Notifications col 2个项目或同一行中有1个项目的Notifications col，这不是我想要的。如何实现＆＃34;移动人像视图＆＃34;没有打破前2的布局？谢谢！

Answer 1

您可以使用嵌套列。

row
  col-*-*
    row
      col-*-*
    row
      col-*-*

查看Docs并在全屏查看工作示例，然后缩小视口。

＆＃13;

/**FOR DEMO PURPOSES ONLY**/

html,
body {
  margin-top: 50px;
  text-align: center;
}
.alert.alert-info {
  height: 100px;
  border-radius: 0;
}
.alert.alert-info-tall {
  height: 340px;
  border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-info alert-info-tall">Notifications</div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="row">
        <div class="col-sm-4">
          <div class="alert alert-info">1</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">2</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">3</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">4</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">5</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">6</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">7</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">8</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">9</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

尝试找出Bootstrap Gird Options和你只需要知道何时使用哪个类哪个屏幕，你就可以了。以下是工作structure供您参考。

 <div class="row">
  <div class="left-block col-lg-4 col-md-12 col-xs-12">
    Aside Section
  </div>
  <div class="content-block col-lg-8 col-md-12 col-xs-12">
    <div class="row" style="padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
    </div>
  </div>
</div>

Answer 3

使用此：

<div class="container">
    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="col-xs-12 notification">
            <p>Notifications</p>
        </div>
    </div>
    <div class="col-md-9 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 1</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 2</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 3</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 4</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 5</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 6</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 7</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 8</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 9</p>
                </div>
            </div>
        </div>
    </div>
</div>

这种风格有助于更好看：

.notification {
    background-color:#000;
    height:auto;
    padding-top: 50px;
    padding-bottom:50px;
    margin-bottom:10px;
}
.item {
    background-color:#333;
    height: auto;
    margin-bottom:10px;
}
p {
    color:#ffffff;
}

这是小提琴：http://jsfiddle.net/xwmmfu0e/

Answer 4

You need to add an xs prefix. Try this adding col-xs-6 to both divs.

<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
            ...
</div>

如何使用bootstrap创建以下响应式布局？

4 个答案: