Question

我正在为一家当地餐馆建立一个网站，这是我有史以来第一个。我现在正在写菜单，但是我不知道如何在屏幕的一半上并排放置例如启动器，在另一半上并排放置主菜单。我也没有成功地使它具有响应性，因为当我缩小屏幕时会变得非常混乱。

我曾尝试使用col-sm-6修改bootstrap 4，但这对我不起作用。我也尝试过在CSS中使用flow和float，但是没有运气。

<div class="menu-title">
      <h1>STARTERS</h1>
      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">1.</span>
          <span class="name">Vegetable Spring Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.                 
          </div>
        </div>                 
      </div>

      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">2.</span>
          <span class="name">Chicken Cheese Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.                 
          </div>
        </div>                 
      </div>

CSS

.menu-title{
  flex-direction: column;
}


.menu-items {
  width: 100%; 
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left; 
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
  margin: 0 1%; 
  width: 31%; 
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff; 
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

我希望输出具有响应性，并在较大的屏幕上显示2或3列菜单标题。

Answer 1

您可以使用媒体查询以及一些简单的浮点数和伪选择器非常简单地执行此操作。默认情况下，它将允许您将内容堆叠在普通流中（对于较小的视口来说是较大的），但是对于较大的视口，请使用float和width值并排设置容器。

这是一个简单的基于浮点布局的示例，该布局允许多个并行部分在多个视口上响应良好。这里是a CodePen demo of parallel sections with floats，后面是工作代码和说明：

body {
  background: gray;
}

.parent {
  background: white;
  overflow: hidden;
  padding: 0 1em;
}

@media (min-width: 40em) {
  .parallel:not(:only-child)  {
    box-sizing: border-box;
    clear: both;
    float: left;
    width: 45%;
  }
  
  .parallel:nth-of-type(even) {
    float: right;
    clear: right;
  }
}

<div class="parent">
  <div class="parallel">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
</div>

<div class="parent">
<div class="parallel">
    <h2>Section 5 &#8212 Oops! No siblings!</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>

即使具有可变长度的部分，浮点数也可以通过使内容在较小的视口中保持简单，然后通过媒体查询进行调整以在较大的视口上并行运行而无需使用高级技术或繁重的标记来处理布局。

该技术可以使其正常运行的一些技巧：

:not(:only-child)仅在并行项的行中具有同级项时才允许应用较大的视口拆分。万一某个节需要单独排成一行或一个兄弟姐妹被临时删除，这只是一个有用的捕获。您不需要修改标记，但是让CSS处理是否可以分割屏幕。
向左浮动的项目应同时清除，向右浮动的项目应仅清除右侧。这样，您就可以将多个项目放在同一个父容器中，并在不添加标记的情况下效果行。
要允许各节交错而不是按行对齐，可以从媒体查询的第一个选择器中删除clear: both;。否则它将是相同的。

还有其他更现代的解决方案，但这是好的，容易和灵活的，并且标记最少。

Answer 2

您可以使用Bootstrap Grid System并声明最大容器宽度。

例如：

col-xl-12-超大屏幕=全屏。 col-xl-4-超大屏幕= 1/3屏幕宽度。

查找我的代码：我创建了容器，行，最后声明了网格选项。

检查CodePen看看它在小型设备上如何工作。

CodePen

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

.menu-title {
  width: 100%;
}

.menu-items {
  width: 100%;
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left;
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff;
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
  <title></title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        <div class="menu-title">
          <h1>STARTERS</h1>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">1.</span>
              <span class="name">Vegetable Spring Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.
              </div>
            </div>
          </div>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">2.</span>
              <span class="name">Chicken Cheese Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        CENTER COLUMN CODE
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        RIGHT COLUMN CODE
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 3

在这里，您有一个简单的 Bootstrap 4 解决方案，其中包含一些仅用于演示的自定义样式。

基本上，您可以使用col-*类来按需构建行；当然;您可能遇到的问题是，您需要每个列都用于不同类型的项目；因此您可以将它们视为行；您可以选择设置flex-column，使其表现得更像您所需；但是我还需要在第二个示例中仅使用Flexbox进行一些其他调整。

.item {
  margin-bottom: 3em;
  border: 1px solid grey;
}

.item header {
  border-bottom: 1px solid grey;
  padding: 15px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-between">
    <div class="col-12 col-sm-5 item">
      <header>Item 1</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    <div class="col-12 col-sm-5 item">
      <header>Item 2</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    <div class="col-12 col-sm-5 item">
      <header>Item 3</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    <div class="col-12 col-sm-5 item">
      <header>Item 4</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    <div class="col-12 col-sm-5 item">
      <header>Item 5</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    <div class="col-12 col-sm-5 item">
      <header>Item 6</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
  </div>
</div>

这里您仅使用 Flexbox

有一个简单的解决方案

.container {
  display: flex;
  height: 100vh;
}

.item {
  flex-basis: 50%;
  margin: 0 15px;
}

.menu-item {
  margin-bottom: 15px;
}

.menu-item header {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid grey;
}

@media (max-width: 768px) {
  .container {
    flex-wrap: wrap
  }
  .item {
    flex-basis: 100%;
    margin: 0 15px;
  }
}

<div class="container">
  <div class="starters item">
    <h1>Starters</h1>
    <hr>

    <div class="menu-item">
      <header>Vegetable Spring Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>

    <div class="menu-item">
      <header>Chicken Cheese Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>

    <div class="menu-item">
      <header>Vegetable Spring Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>
  </div>
  <div class="mains item">
    <h1>Mains</h1>
    <hr>
    <div class="menu-item">
      <header>Chicken Cheese Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>

    <div class="menu-item">
      <header>Vegetable Spring Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>

    <div class="menu-item">
      <header>Chicken Cheese Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>
  </div>
</div>

如何并排对齐餐厅菜单的标题？

3 个答案: