小编jos*_*sef的帖子

使用 Tailwind CSS，我想在内容太大而无法适应屏幕宽度时应用滚动效果。我有一个 div 容器来保存我想要滚动的子元素。当我使用一个部分来保存图像和用户名（如下所示）时，它们都会缩小以适应屏幕尺寸。这不是我想要的。我只想在滚动时显示几个部分和其余部分。我缺少什么？

不工作

<div class="flex overflow-x-auto space-x-8">
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section> 
</div>

如果我像下面这样说，它就可以工作，但我不希望这样。

<div class="flex overflow-x-auto space-x-5"> 
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 …

我正在使用 laravel 和惯性.js 来实现我的项目。在我的导航栏中，如果用户已登录，我想显示带有一些用户详细信息的 div 元素。如果用户未登录，则不应出现 div 。我已经尝试过此操作，但无论是在我登录还是未登录时，它都没有显示详细信息。我应该怎么办？

<div class="ml-3 relative" v-if="$page.props.auth.user">
    <div>
        <button @click="dropDown=true"
                class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                id="user-menu" aria-haspopup="true">
            <span class="sr-only">Open user menu</span>
            <img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url"
                 :alt="$page.props.user.name"/>
        </button>
    </div>
    <div v-if="dropDown"
         class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
         role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <form method="POST" @submit.prevent="logout">
                <jet-responsive-nav-link as="button">
                    Logout
                </jet-responsive-nav-link>
            </form>
        </a>
    </div>
</div>

在AppServiceProvider上

public function boot() …