我无法让 col-8 与 col-4 并排渲染？

Question

以下是我提交的代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <title>Document</title>
    </head>
    <body>
      <div class="container">
        <div class="row no-gutters">
          <div class="col-8">
            <img class="img-fluid" src="pic/Indian.jpg" alt="">
          </div>
          <div class="col-md-8">
            <p>
              This reciepie is called Tikka Masala, and its a fovrite in south India.
              The orgin of this dish is unkown to me, but I suppose that I can look
              into it and find out. When I go to Indian restaurants I always order
              this meal because its so good. I think that every one should try this
              food at some point in thier life and many will like it.
            </p>
          </div>

这是我需要帮助的部分，它似乎无法正确渲染。

这种接收器被称为 Tikka Masala，在印度南部很受欢迎。我不知道这道菜的起源，但我想我可以看看深入其中并找出答案。当我去印度餐馆时我总是点菜这顿饭因为太好吃了。我认为每个人都应该尝试这个在他们生命中的某个时刻，很多人都会喜欢食物。

Answer 1

在引导程序中，列数限制为 12。请参见下图。

在您的代码中，您使用了以下 2 行

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

这意味着您首先获取 8 列，然后再获取 8 列。共16栏。因此，要获取另外 8 列，请转到下一行。如果您想通过限制一列来解决此问题，请将列数限制为 12。

解决方案1：

<div class="col-8"></div>
<div class="col-4"></div>

解决方案2：

<div class="col-md-4"></div>
<div class="col-md-8"></div>

我希望这对你有帮助。谢谢。

我无法让 col-8 与 col-4 并排渲染？

问题描述投票：0回答：1

1个回答

最新问题

我无法让 col-8 与 col-4 并排渲染？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1