时间戳

首页 > 解决方案 > React：Tailwind CSS 似乎无法模仿引导程序 col-md-6？

css - React：Tailwind CSS 似乎无法模仿引导程序 col-md-6？

问题描述

我想把我的盒子/表格放在屏幕正中央的盒子里（我已经这样做了），但它很窄？我尝试添加w-full各种元素，但无法让它模拟屏幕宽度的一半或全屏，我做什么都不会让我改变宽度？

我正在使用反应，这是我的组件：从“反应”导入反应；

    import { LockClosedIcon } from '@heroicons/react/solid'
    
    function App() {
        return (
            <div>
                <div className="flex h-screen">
                    <div className="m-auto">
                        <div className="shadow font-medium bg-white rounded-md flex p-10 pt-4 items-center justify-center w-max">
                            <form className="space-y-6" action="#" method="POST">
                                <input type="hidden" name="remember" defaultValue="true" />
                                <div className="rounded-md shadow-sm -space-y-px">
                                    <div>
                                        <label htmlFor="email-address" className="sr-only">
                                            Email address
                                        </label>
                                        <input
                                            id="email-address"
                                            name="email"
                                            type="email"
                                            autoComplete="email"
                                            required
                                            className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                                            placeholder="Email address"
                                        />
                                    </div>
                                    <div>
                                        <label htmlFor="password" className="sr-only">
                                            Password
                                        </label>
                                        <input
                                            id="password"
                                            name="password"
                                            type="password"
                                            autoComplete="current-password"
                                            required
                                            className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                                            placeholder="Password"
                                        />
                                    </div>
                                </div>
    
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center">
                                        <input
                                            id="remember-me"
                                            name="remember-me"
                                            type="checkbox"
                                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                                        />
                                    </div>
    
                                    <div className="text-sm">
                                        <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                                            Forgot your password?
                                        </a>
                                    </div>
                                </div>
    
                                <div>
                                    <button
                                        type="submit"
                                        className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                    >
                  <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                    <LockClosedIcon className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
                  </span>
                                        Sign in
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    
    export default App;

标签： cssreactjstailwind-css

解决方案

在您的 JSX 顶部附近，我认为您想要进行两项更改：

  • 将第三个的宽度设置div为您想要的宽度。md:w-1/2我相信就像col-md-6在 Bootstrap 中一样。
  • w-max从第 4 个中删除，div因为这将该元素的宽度限制为其中的内容。w-full可能是你想要的，但是一旦你设置它的父元素，即使这样似乎也没有必要。

这是具有这些更改的外部 JSX 元素：

<div>
    <div className="flex h-screen">
        <div className="m-auto md:w-1/2">
            <div className="shadow font-medium bg-white rounded-md flex p-10 pt-4 items-center justify-center">
                {/* ... */}
            </div>
        </div>
    </div>
</div>

推荐阅读