标签: bootstrap-grid

我正在测试Twitter Bootstrap并且遇到了带行的基本脚手架.我重新访问了他们的文档次数,我可以看到嵌套列,您可以在列中基本嵌套列,但我无法找到将行组合成一个并使其与未组合行旁边的列对齐的功能.

下图应说明我想要完成的任务.

我遇到的唯一解决方法是使用表,但我不喜欢这个想法,因为我的观点是响应性不适用于表的使用.

有没有人有这个优雅的解决方案？我所做的大多数网页布局都需要很高的灵活性,所以如果我能在这里找到有用的东西,那将会非常棒.

Mac上的Bootstrap 4和Safari浏览器存在问题.当在行中使用cols时它会破坏它,并且不像firefox或chrome那样工作.我正在使用这样一个简单的代码:

<div class="row align-items-center">
    <div class="col-sm-12 col-md-3 hidden-xs align_left"><h3>TEXT</h3></div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
    <div class="col-sm-4 col-md-3">TEXT</div>
</div>

我正在尝试从另一个问题尝试不同的"修复代码",但它们并没有解决问题.任何线索？

提前致谢

我正在尝试开发一个具有以下要求的Bootstrap 4卡网格:

• 所有卡都必须位于一个div中class="row",因为我不知道总数会有多少卡,我希望行在不同的屏幕断点处看起来很好.
• 此行中的列在不同的断点处的大小不同(例如,col-sm-6 col-lg-4).
• 在任何单独的"显示行"中,例如,在任何给定时间在屏幕上显示的一行卡片,每张卡片应具有相同的高度.
• 每张卡的底部应有一个边距,以便与所有其他卡分开.

我已经设法得到了几乎所有的方式,但我遇到了一个问题:设置class="h-100"我的卡以确保它们都是相同的高度杀死每张卡底部的边距.

有没有办法确保任何给定显示行中的所有卡都是相同的高度,同时保留其底部的边距？

HTML代码:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card …

我正在创建一个包含3行的图库,每行包含3个图像,使用Bootstrap网格系统.所有图像都有不同的大小.我想要做的是使所有图像大小相同.我试图在我的CSS中使用max-height或max-width,但它没有帮助使所有图像(缩略图)大小相似.我应该只是获得缩略图类的装备还是有其他解决方案？

body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail"> …

如何使用一行和内部的2列创建引导网格.第一列大小为9 col-md-9,第二列大小为3 col-md-3,无论内容在列内的多长时间,行和列都会很好并且它们之间会有边界.我该怎么做？它应该如下所示:

不是这样的:

这是一个jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

我正在尝试制作一个响应式网站，一个博客，但我遇到了一个问题，我每个博客都有 col-lg-4 的引导网格，但它们的高度各不相同，并且通过保持相同的列行来遵循某种模式，但我想删除多余的空格。希望周围的人可以提供帮助。

<div class="container">
   <div class="row">
      <div class="col-lg-4" style="height: 200px"> i am a div of height 
      200px</div>
      <div class="col-lg-4" style="height: 400px"> i am a div of height 
      400px</div>
      <div class="col-lg-4" style="height: 300px"> i am a div of height 
      300px</div>
      <div class="col-lg-4" style="height: 500px"> i am a div of height 
      500px</div>
   </div>
</div>


row{ display: flex; flex-wrap: nowrap}

我目前的博客结构

我想要的方式

我正在学习 Bootstrap，并且看到一门专注于 Bootstrap 4 的课程。我不确定以下内容是否与此有关，但我无法完成此练习。

我正在为大屏幕尺寸制作这个网格：

当将屏幕尺寸减小到中等时，网格现在应该如下所示：

最后，在比中等屏幕尺寸更短的情况下，屏幕应该如下所示：

我尝试过以下代码，但在最大尺寸上没有成功：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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">
    <style>
        div[class^="col"] {
            height: 100px;
            background: #fdca6d;
            border: 1px solid white;
        }
    </style>
    <title>Grid challenge 2</title>
  </head>
  <body>
    <div class="container mt-4">
        <!--Start first row-->
        <div class="row">
            <div class="col-6 col-md-3">
                Row 1 / Col 1
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 2
            </div>
            <div class="col-6 …

我正在使用 Bootstrap 4，这就是我想要实现的目标（一张图片值一千字）：

这是我通过使用此标记设法实现的目标：

<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div> <!-- I want 3 to stick to the bottom of 1 -->

任何引导程序专家都可以帮我解决这个问题吗？

我正在 Blazor 中将数据加载到包含 3 列的网格中。对于网格结构，我使用了 Bootstrap 行和列。如果我需要在悬停时突出显示行并使用 onClick 事件保持选择行，那么实现它的最佳方法是什么？

以下是我填充数据的方法。

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in users)
    {
        <div class="row">
            <div class="col">@user.UserName</div>
            <div class="col">@user.FirstName</div>
            <div class="col">@user.LastName</div>
        </div>
    }
</div>

谢谢。