如何使元素响应式在左侧对齐

Posted 2023-02-22

【中文标题】如何使元素响应式在左侧对齐

【英文标题】：How to make the elements responsive aligned on the left side

【发布时间】：2021-07-23 14:42:45

【问题描述】：

当我试图最小化浏览器的窗口时，我试图使元素“分支”响应完美地对齐到“状态”下方，我该怎么做？这就是我目前所得到的result，我也尝试使用@media only screen CSS，但仍然没有显示响应的迹象，这是我的代码行

`

<template>
  <base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1"
    />

    <template>
      <div>
        <b-form inline>
          <label for="status">Status⠀⠀⠀⠀ :</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <!-- branchstyle -->
          <div class="branch">
            <div class="col-lg-10 text-right">
              <b-form inline label-align-sm="right" style="margin-left: 70px">
                <div class="col-sm-2" label for="branch">Branch⠀:</div>
                <div class="col-sm-8">
                  <b-form-input
                    v-model="text"
                    style="margin-left: 33px"
                  ></b-form-input>
                </div>
                <br />
                <!-- <div class="input-group col-sm-2">
                  <b-button variant="outline-dark"></b-button>
                </div> -->
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <div>
        <b-form inline>
          <label for="storecode">Store Code⠀:</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <div class="branch">
            <div class="col-lg-12 text-right">
              <b-form inline label-align-sm="right">
                <div class="input-group col-sm-10">
                  <b-button
                    variant="dark"
                    style="margin-left: 205px; margin-top: 5px"
                    >Search</b-button
                  >
                </div>
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <br />
      <br />
      <b-card body>
        <b-card-header class="border-0">
          <h3 class="mb-0">Stock List</h3>
        </b-card-header>
        <div class="text-center">
          <b-table dark striped hover :items="items" :fields="fields"></b-table
          ><br />
        </div>
      </b-card>
    </template>
  </base-header>
</template>

<style></style>`

提前感谢，希望你有一个愉快的一天☺

【问题讨论】：

尝试在分支组件上使用col-sm-12类。

【参考方案1】：

我尝试模拟您的问题并实现此代码 sn-p。因为我在代码 sn-p 中看不到您的结果，所以我假设您想要一个响应式表单，当屏幕最小化时，您的输入会放在右侧部分。

为了提高可读性，我进行了一些清理和改进，我使用flex 来解决您的响应问题。

new Vue(
  el: "#app",
  data: function() 
    return 
      text: "a",
      fields: ['first_name', 'last_name', 'age'],
      items: [
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        ,
        
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        ,
        
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        ,
        
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        
      ]
    
  ,
);

.customForm>div 
  display: flex;
  flex: 1 0 250px;
  margin: 1rem;



.customForm 
  display: flex;
  flex-wrap: wrap;


.customForm > div > label 
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form class="customForm">
    <div>
      <label>Status:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Branch:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Store Code:</label>
      <b-form-input v-model="text" />
    </div>

    <div>
    <b-button variant="dark">Search</b-button>
    </div>
  </b-form>
  <b-card body>
    <b-card-header class="border-0">
      <h3 class="mb-0">Stock List</h3>
    </b-card-header>
    <div class="text-center">
      <b-table dark striped hover :items="items" :fields="fields" />
    </div>
  </b-card>
</div>