相关疑难解决方法(0)

我有一个具有以下结构的网站:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

导航位于左侧,内容div位于右侧.内容div的信息通过PHP引入,因此每次都不同.

我如何垂直缩放导航,使其高度与内容div的高度相同,无论加载哪个页面？

我正在试图弄清楚如何使用Bootstrap执行以下网格.

我不确定我是如何创建跨越两行的盒子(编号1).这些框按照布局顺序以编程方式生成.方框1是一条欢迎信息.

关于最佳方式的任何想法？

我还没有找到合适的解决方案,看起来很琐碎.

我在一行中有两列:

<div class="row">
  <div class="col-xs-9">
    <div class="left-side">
      <p>sdfsdf</p>
      <p>sdfsdf</p>
      <p>sdfsdf</p>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="something">asdfdf</div>
  </div>
</div>

行高由较大的行设置left-side.但是,我希望右侧的高度相同.

这似乎很直观,但它不起作用

.left-side {
    background-color: blue;
}
.something {
    height: 100%;
    background-color: red;
}
.row {
    background-color: green;
}

http://jsfiddle.net/ccorcos/jz8j247x/

这个标题可能不是很准确,但情况如下:

正如您在HTML中看到的那样,网格系统从xl屏幕上的4个图像到 lg屏幕上的3 个图像到2个更少的图像.

我试图让它正确显示 - 每个屏幕尺寸的适当数量的图像,即.然而,一些时髦的东西正在发生,并且无法使用bootstraps类来解决它.

在我看来,我必须在每个断点处动态添加行.

有什么建议？

- 更新 - 刚刚意识到col-xl-*不存在.但是,这根本不会改变这种情况.请忽略xl声明.

- 更新2 - 更新的图像.

- 更新3 - 我会尽力澄清我的目标.对于我帖子中附带的特定图像,我希望每行显示3个框 - 不是所有的helter skelter.

当它每行折叠到2个盒子(xs设备)时,我想确保每行有2个盒子.

我是Bootstrap 3的新手,我希望我的登陆页面上有3个面板,高度相同,即使中间面板的内容较少.调整大小后,它们会变成相同的高度,但在初次访问页面时不会.

我已经尝试用CSS隐藏溢出,它切断了面板的底部,这不是我想要的,所以我想我需要使用jQuery.

这是我的代码:

<div class="row-fluid">
  <!--begin panel 1 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title text-center">Web y Metrícas</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
        </p>
        <p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
        <ul class="text-left">
          <li>Web Corporativas</li>
          <li>Tiendas Virtuales</li>
          <li>Plataformas e-Learning</li>
          <li>Arquitectura de Información</li> …

免责声明.这个问题被问很多之前倍.但是由于时间已经过去,现在我们接近Bootstrap 4发布并且支持完整的flexbox,现在是时候为同一个问题找到新的答案了.

我想用Bootstrap 4创建相等的列高度.这是预期结果的演示:

我想要一个适用于Bootstrap 4支持的所有浏览器的解决方案.如果没有涉及JS,那就更好了.一些现有的解决方案基于Bootstrap 3,有些不适用于MacOS上的Safari.

更新.似乎我做错了研究.默认情况下,Bootstrap 4的高度相同.我已经包含了一个带有插图的更新图像.你不需要做任何事情,它已经存在了.

我刚刚开始学习,所以请坚持下去,我会尝试提供尽可能多的信息.

使用Bootstrap 3我一直试图调整一些内容区域,使它们具有相同的高度.我每行有4个具有未指定数量的列(我正在循环通过php数组来确定这一点).基本上无论我需要显示多少内容区域,它们都应该使用相同的高度,或者至少与它上面的其他三个高度相同.

我一直在使用这个jquery库> https://github.com/mattbanks/jQuery.equalHeights >效果很好,但每当我调整页面大小时,内容区域的高度都不会更新(如果我将屏幕拖动到新的大小和命中刷新高度重新调整到正确的位置)

我还查看了一些其他解决方案,例如> Twitter Bootstrap - 流体列的相同高度,但是当我调整多行时,这似乎不起作用.

任何帮助将不胜感激,无论我是应该使用JavaScript解决方案还是我可以用CSS做什么.记住它我需要高度保持一致,并在屏幕调整大小时重新调整.我更喜欢使用Bootstrap 3,但如果解决方案可用于2,我将使用该版本.

<div class = "container">
<div class="row">
    <div id="equalheight">      

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div …

我连续三列.我希望所有三列具有相同的高度(填满整个空白区域)

目前,它看起来像这样:

如您所见,左列是正确的高度.中间和右边不是.

它的脚手架看起来像这样:

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

我试图给出100%的中间和右侧跨度高度,但这并不是这样.任何人都可以指导我正确的方向吗？

我正在使用最新版本的Twitter Bootstrap

我有以下HTML代码:

<div class="container">
  <div class="row row1">
      <div class="col col1 col-md-3">
          Column 1
      </div>
      <div class="col col2 col-md-3">
          Column 2 
      </div>
      <div class="col col3 col-md-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>

我正在使用bootstrap网格布局系统,我想实现这样的事情:

这个想法是col1和col2应该与col3和col4的高度相同.

有没有一种方法可以在不指定容器的高度和设置子元素高度100%的情况下这样做,就像我在这个例子中所做的那样？

Jsfiddle演示

我想使第一行之后的列即使具有动态内容（转到整页），也使 col-md-6 的高度相等。

<html>

<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!--JS-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-md-6">
        <div class="shadow p-3 mb-5 bg-white rounded">
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                -Icon-
              </div>
              <div class="col-md-6">
                <p>Date</p>
              </div>
            </div>

          </div>
          <p>Author</p>
          <div class="row">
            <div class="col-md-6">
              <p>Time</p>
            </div>

            <div class="col-md-6">
              <div>

              </div>
            </div>
            <!-- This needs to get the latest unread message -->
            <!-- {% if …