高级Bootstrap网格布局

时间：2017-04-20 00:04:06

标签： css twitter-bootstrap

我目前正在使用（Bootstrap）[http://getbootstrap.com/getting-started/]为项目构建布局。它似乎是我想要的方式，但"username"部分中的内容溢出进入下面的部分。 文字变得隐藏但它仍然可以被选中，它就在那里，我担心它会在手机上出现故障。

还有其他方法可以制作这样的布局。有没有人有类似的东西的例子，或者有人可以帮助我解决这个并使其更好，因为它不能正确地在电话大小视图端口上工作。

提前谢谢你，

克里斯。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h3>Welcome</h3>
<div class="row">
  <div class="col-md-8" style="height:250px;">
    <div class="row" style="height:100%;">
      <div class="col-md-12" style="overflow: hidden;">
        <h5>Your Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4" style="height:250px;background-color:#fff">
    <img class="img-thumbnail" src="http://placehold.it/100">
    <h3 style="float: right;">username</h3>
    <p style="overflow: hidden;">Other user data here.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-8" style="height:500px;">
    <div class="row" style="height:50%;">
      <div class="col-md-12" style="overflow: hidden;">
        <h5>Pinned Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <h5>Trending Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4" style="height:500px;background-color:#fff">
    <h3>Recent Activity</h3>
    <br>
    <p>Other user data here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac nisl eget nisi hendrerit ullamcorper nec vitae eros. Cras pellentesque blandit malesuada. Sed lobortis accumsan varius. Morbi vulputate dolor felis, non iaculis
      ex pellentesque vel. Aenean consectetur, augue aliquet auctor imperdiet, lectus enim accumsan metus, et dapibus elit eros eget risus. Aenean eu cursus lacus. Nam condimentum tellus in diam lacinia iaculis. Morbi vitae libero dolor. Maecenas tempus
      eleifend mauris, eu porttitor nisi lobortis at. In molestie eros at felis cursus egestas. Nunc a tincidunt dolor. Duis sem elit, consequat sed facilisis non, lobortis in arcu.</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

问题在于"Your Project"部分你正在使用它：

<div class="col-md-8" style="height:250px;">

因此，最大高度为250px我建议您将其更改为100%并添加填充，如下例所示：

<div class="col-md-8" style="height:100%; padding-bottom: 10px;">

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h3>Welcome</h3>
<div class="row">
  <div class="col-md-8" style="height:100%; padding-bottom: 10px;">
    <div class="row" style="height:100%;">
      <div class="col-md-12" style="overflow: hidden;">
        <h5>Your Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4" style="height:250px;background-color:#fff">
    <img class="img-thumbnail" src="http://placehold.it/100">
    <h3 style="float: right;">username</h3>
    <p style="overflow: hidden;">Other user data here.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-8" style="height:500px;">
    <div class="row" style="height:50%;">
      <div class="col-md-12" style="overflow: hidden;">
        <h5>Pinned Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <h5>Trending Projects:</h5>
        <div class="project-container" style="display: inline;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
          <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4" style="height:500px;background-color:#fff">
    <h3>Recent Activity</h3>
    <br>
    <p>Other user data here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac nisl eget nisi hendrerit ullamcorper nec vitae eros. Cras pellentesque blandit malesuada. Sed lobortis accumsan varius. Morbi vulputate dolor felis, non iaculis
      ex pellentesque vel. Aenean consectetur, augue aliquet auctor imperdiet, lectus enim accumsan metus, et dapibus elit eros eget risus. Aenean eu cursus lacus. Nam condimentum tellus in diam lacinia iaculis. Morbi vitae libero dolor. Maecenas tempus
      eleifend mauris, eu porttitor nisi lobortis at. In molestie eros at felis cursus egestas. Nunc a tincidunt dolor. Duis sem elit, consequat sed facilisis non, lobortis in arcu.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

以下代码是您的布局的修改实现，用于修复＆＃39;用户名＆＃39;，＆＃39;最近的活动＆＃39;和＆＃39;趋势项目＆＃39;通过删除一些不必要的行和列，并按照引导程序约定将网格封装在容器中。

探索文档可能很有用：https://v4-alpha.getbootstrap.com/layout/grid/ 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



  <div class='container'>
    <h3>Welcome</h3>
        <div class="row">
          <div class="col-md-8" style="height:250px;">
            <h5>Your Projects:</h5>
            <div class="project-container" style="display: inline;">
              <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
              <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
              <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
              <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
              <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
            </div>
          </div>
          <div class="col-md-4" style="height:250px;background-color:#fff">
              <img class="img-thumbnail" src="http://placehold.it/100">
              <h3>username</h3>
              <p style="overflow: hidden;">Other user data here.</p>
          </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <h5>Pinned Projects:</h5>
                <div class="project-container" style="display: inline;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                </div>
            </div>
            <div class="col-md-4" style="background-color:#fff">
              <h3>Recent Activity</h3>
              <br>
              <p>Other user data here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Vivamus ac nisl eget nisi hendrerit ullamcorper nec vitae eros. Cras pellentesque blandit malesuada. Sed
                  lobortis accumsan varius. Morbi vulputate dolor felis, non iaculis ex pellentesque vel. Aenean
                  consectetur, augue aliquet auctor imperdiet, lectus enim accumsan metus, et dapibus elit eros eget
                  risus. Aenean eu cursus lacus. Nam condimentum tellus in diam lacinia iaculis. Morbi vitae libero dolor.
                  Maecenas tempus eleifend mauris, eu porttitor nisi lobortis at. In molestie eros at felis cursus
                  egestas. Nunc a tincidunt dolor. Duis sem elit, consequat sed facilisis non, lobortis in arcu.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <h5>Trending Projects:</h5>
                <div class="project-container" style="display: inline;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                    <img class="img-thumbnail" src="http://placehold.it/100" style="margin: 20px 10px 0px 10px;">
                </div>
            </div>
        </div>
    </div>
相关问题
最新问题