Question

我有一个小图片，一个表单输入字段和一个提交按钮。它们按照我的要求，在普通台式计算机上的网站上水平并排显示。

当在小屏幕上查看页面时，提交按钮下降到下面的行（好），但图像停留在文本输入字段旁边的位置。理想情况下，我想在移动视图中强制将这三个元素叠加在一起。因此，顶部是图像（居中），然后是文本输入字段，然后是提交按钮。

我对响应式设计只有非常基本的理解。有什么提示吗？

以下是代表我情况的代码：

Select MAX(ML.NAME), ML.E_ID,  CASE   --If the day of the month is the 1st, 2nd or 3rd then it will use the last day of the previous month otherwise it will use the last day of the current month
                WHEN EXTRACT( DAY FROM SYSDATE ) <= 3
                THEN TRUNC( SYSDATE, 'MM' ) - INTERVAL '1' DAY
                ELSE LAST_DAY( TRUNC( SYSDATE ) ) END, 1, 'M1' from DIR_LOG ML, M_LOG MD
WHERE ML.NAME != MD.NAME and ML.E_ID != MD.E_ID and
ML.NAME = 'PL' 
GROUP BY ML.E_ID

.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
}
.row {
   width: 100%;
}
.flex-item {
   padding: 0;
   margin: 0;
   text-align: center;
}

Answer 1

@media (max-width: 1024px)  {
    .flex-container {
        display: block;
    }
}

Answer 2

以下是使用CSS网格布局执行此操作的方法。

它在CSS方面相当沉重，但它允许极其微小的HTML。

你基本上只是设置它以便它将全部显示在一列中，但如果屏幕足够宽，你可以将它并排放置。你可以反过来做，将它设置为并排显示，但如果屏幕太窄，你可以将它设为一列。

＆＃13;

body {
  display: grid;
  grid-gap: 1em;
}

img {
  justify-self: center;
}

form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

input {
  margin: 5px;
}

input[type="text"] {
  grid-column: 2;
  align-self: center;
}

input[type="submit"] {
  grid-column: 2;
  align-self: center;
}

@media (min-width: 800px)  {
  body {
    grid-template-columns: 1fr auto auto 1fr;
  }
  
  img {
    grid-column: 2;
  }
  
  form {
    grid-column: 3;
    grid-template-columns: 1fr auto auto 1fr;
  }
  
  input[type="text"] {
    grid-column: 2;
  }

  input[type="submit"] {
    grid-column: 3;
  }
  
}

＆＃13;

<img src="https://images.unsplash.com/photo-1509718752889-8c69d2c6c11d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0b901b115b38" height="65" width="150" />
 
<form action="find.php" method="post">
   <input type="text" name="thingy_id" placeholder="Enter Thingy ID" size="13" maxlength="15">
   <input type="submit" value="SUBMIT" class="thingyid" />
</form>

＆＃13;

我真的很想在Grid中这样做。你不必这样做，但这是一种方式，我觉得更多人应该意识到这一点。

Answer 3

您可以使用下面显示的额外Bootstrap类使元素的列在移动设备上占据整行。然后，您可以使用CSS来调整元素的宽度和大小。

    <div class="flex-container">
      <div class="row">
        <div class="col-xs-12"> // setting the column to 12 makes the 
         element take up row entire row pushing the neighbouring 
         elements to move under it
          <span class="flex-item"><img 
            src="https://images.unsplash.com/photo-1509718752889-
             8c69d2c6c11d?ixlib=rb-
             0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJ
             hcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0
             b901b115b38" height="65" width="150">
          </span>
        </div>
      </div>
      <div class="row">
        <span class="flex-item">
          <form action="find.php" method="post">
            <div class="col-xs-12"> // Use here
              <input type="text" name="thingy_id" placeh
                older="Enter Thingy ID" size="13" maxlength="15">
            </div>
            <div class="col-xs-12"> // Use here
              <input type="submit" value="SUBMIT" class="thingyid" />
            </div>
          </form>
        </span>
      </div>
     </div>

如何在移动视图中制作元素堆栈？

3 个答案: