Question

我正在做一个React项目，我正在努力使该项目对手机，平板电脑和笔记本电脑具有响应能力。当前，移动设备和平板电脑屏幕具有响应能力，但是在大小为1024px的笔记本电脑屏幕上，div的行为就像一个显示块。但是，当笔记本电脑的屏幕尺寸为1024px时，我希望所有div并排放置。

我该如何实现？这是我的代码。

这是App.js

import React from 'react';
import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'


function App() {
  return (
    <div className='container-fluid'>
      <div className='row'>
        <div className='col-12'>
          <div className='content text-center'>
            <h3 className='one'>One million success stories.
            <span className='start'>Start yours today.</span>
            </h3>
          </div>
          <div className='col-12 col-lg-5 main'>
            <input type='text' className='inputtagcommonstyle' placeholder='Enter Skills or job title'></input>
          </div>
          <div className='col-12 col-lg-3 '>
            <select className='inputtagcommonstyle removebackgroundcolor'>
              <option>Select Categories</option>
              <option>Marketing</option>
              <option>Teaching & Education</option>
            </select>
          </div>
          <div className='col-12 col-lg-2 '>
            <select className='inputtagcommonstyle removebackgroundcolor'>
              <option>Select City</option>
              <option>New York</option>
              <option>San Joes</option>
            </select>
          </div>
          <div className='col-12 col-lg-2 '>
            <input type='submit' className='btn' value='Search Job'></input>
          </div>
          <div className='col-12 getstarted'>
            <a href='www.facebook.com'>
              <FontAwesomeIcon icon={faUser} /> Get Started Now
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

这是App.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.one {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 36px;
}

.start {
  display: block;
}

.inputtagcommonstyle {
  height: 50px;
    border-radius: 0;
    padding: 13px 15px;
    font-size: 18px;
    width: 100%;
    color: #555;
}

.removebackgroundcolor {
  background-color: white;
}

@media only screen and (max-width: 768px) {
  .inputtagcommonstyle {
    margin-bottom: 15px;
  }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
}

.btn {
  width: 100%;
  background-color: #263bd6 !important;
    border-radius: 0 !important;
    color: #fff !important;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    font-family: 'Roboto', sans-serif;
}

.getstarted {
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif !important;
}

.getstarted a {
    border: 3px solid #263bd6;
    padding: 12px 25px;
    color: red;
    font-size: 18px !important;
    font-weight: 700;
    font-family: 'Roboto', sans-serif !important;
    display: inline-block;
}

a {
  transition: 0.3s ease-in-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

如果不清楚或需要更多信息，请发表评论

Answer 1

@media only screen and (min-width:768px) and (max-width:1024px) {
  .yourParentDivClass: { //parent class of divs which you want side by side
    display: flex
  }
}

如何通过使用媒体查询在特定屏幕上插入div

1 个答案: