Question

我对使用Bootstrap时遇到的行为感到困惑。 This page似乎暗示如果我想要一个3x3网格，我可以使用类似于以下内容的东西（直接从页面中获取）：

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

然而，当我尝试这个时：

<div class="container">
    <div class="row">
        <div class="col align-self-center">
            <img src="~/images/UpArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col align-self-start">
            <img src="~/images/LeftArrow.png" />
        </div>
        <div class="col align-self-center">
            <img src="~/images/Background.png" />
            <textarea>test</textarea>
        </div>
        <div class="col align-self-end">
            <img src="~/images/RightArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col align-self-center">
            <img src="~/images/DownArrow.png" />
        </div>
    </div>
</div>

箭头图像简单地排列在彼此之上。我设法让这个按照我的意愿行事，使用这种方法：

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-3">
            <img src="~/images/UpArrow.png" />
        </div>    
    </div>

    <div class="row">
        <div class="col-md-3">
            <img src="~/images/LeftArrow.png" />
        </div>
        <div class="col-md-3">
            <img src="~/images/Background.png" />
            <textarea>test</textarea>
        </div>
        <div class="col-md-3">
            <img src="~/images/RightArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-3"></div>

        <div class="col align-self-center">
            <img src="~/images/DownArrow.png" />
        </div>
    </div>
</div>

我的问题是：为什么我最初的尝试不起作用？此外，是我最终的方式，最好的（或唯一的方式）实现这一目标。

Answer 1

了解Bootstrap

使用col为元素提供列的属性，而不显式设置宽度。这将导致每列缩小（或增长）以容纳行中的所有其他列（如果没有列将占用整行）。

在您提供的示例中，您可以使用col-md-3，将其分解为col对象，然后是断点md，以及设置的宽度（或数字） 3的12）中的列空格。这意味着任何超过md的屏幕宽度都会导致此div为3列宽度元素。

如果您希望它一直充当此网格（包括小屏幕，即手机），我建议您将课程更改为col-3。删除断点会使其始终充当3列元素。此外，您可以使用mr-auto＆amp; amp;来改进第一部分和最后一部分。 ml-auto类使它们居中并删除空div。

Bootstrap需要一点时间来习惯，但是一旦你掌握了类系统，它就有意义了。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
    <div class="row">
        <div class="col-4 mr-auto ml-auto">
            UP
        </div>    
    </div>

    <div class="row align-items-center">
        <div class="col-4">
            LEFT
        </div>
        <div class="col-4">
            CENTER
            <textarea>test</textarea>
        </div>
        <div class="col-4">
            RIGHT
        </div>
    </div>

    <div class="row">
        <div class="col-4 mr-auto ml-auto">
            DOWN
        </div>
    </div>
</div>

＆＃13;

Answer 2

如果你想要中等（md）屏幕及以上的十字形布局，那么有一种更有效的方法来实现它，因为在这种情况下你只需要一个div用于顶行和底行。在这些行上使用justify-content-center类将使列水平居中，如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-3 text-center border">
            <i class="fa fa-arrow-circle-up" style="font-size: 55px;"></i>
        </div>    
    </div>
    <div class="row justify-content-center">
        <div class="col-md-3 text-center text-md-right border">
            <i class="fa fa-arrow-circle-left" style="font-size: 55px;"></i>
        </div>
        <div class="col-md-3 text-center border">
            <img src="https://picsum.photos/57" />
            <div class="w-100"></div>
            <textarea>test</textarea>
        </div>
        <div class="col-md-3 text-center text-md-left border">
            <i class="fa fa-arrow-circle-right" style="font-size: 55px;"></i>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-3 text-center border">
            <i class="fa fa-arrow-circle-down" style="font-size: 55px;"></i>
        </div>
    </div>
</div>

＆＃13;

由于使用了响应式文本对齐类（例如text-center text-md-right等），当在小于md的屏幕上折叠成单个列时，所有内容都会整齐地堆叠在一起。

通过使用响应式d-none类（d-none表示＆＃34; display：none＆＃34;），还可以删除较小屏幕上的某些元素。

<div class="w-100"></div>只是一个分隔符，可以确保元素很好地叠加在一起。 w-100表示＆＃34;宽度：100％＆＃34;。

您的初始方法无法工作的原因是您没有在行上使用justify-content-center类。这是一个flexbox类，用于将项目水平居中。

使用Bootstrap

2 个答案:

了解Bootstrap