英文:
How to make two items appear next to eachother in an xs viewport with bootstrap
问题
在开始之前，我想说我是一个初学者，所以对于我的混乱代码我深感抱歉。
我仍在继续工作，所以样式有点混乱，但我正在尝试在 xs 视口上使我的名字（Tristen Roth）和 navbar-toggler-icon 出现在一起。目前，它会将它们垂直放置在视口中的两行/行中，这会留下许多不雅观的空白空间，位于切换图标的右侧以及我的名字的两侧。
理想情况下，我希望在 xs 视口上，名字出现在图标旁边的同一行上，以消除空白空间。
我已经尝试了很多方法，有些方法有效，但它们会破坏大于 xs 视口上的格式，这就失去了初衷。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.row-content {
padding-bottom: 10px;
border-bottom: 1px ridge;
}
header {
margin: 2%;
}
.navbar {
margin: 0;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-xs-3 col-md-4 col-xl-4" id="fullnavelement">
<nav class="navbar navbar-expand-md navbar-light" id="navelement">
<div class="container pl-0 d-inline-flex" id="navcontainer">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" id="navbar-links-custom">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link px-sm-2 px-md-3 px-lg-4 px-xl-5" href="about.html">About</a>
<a class="nav-link" href="portfolio.html">Portfolio</a>
</div>
</div>
</div>
</nav>
</div>
<div class="col-xs-9 col-md-4 col-xl-4 align-self-center" id="nameobject">
<h1 class="text-center text-nowrap">Tristen Roth</h1>
<div class="d-none d-lg-block">
<h5 class="text-center text-nowrap">Web Designer & Web Developer</h5>
</div>
</div>
<div class="col-md-4 col-xl-4 mt-4 d-none d-md-block">
<a class="btn btn-info text-nowrap" role="button">Contact Me</a>
</div>
</div>
</div>
</header>
<!-- end snippet -->
英文:
Before I start I want to say I'm a beginner so I apologize for my messy code.
I'm still working on this so the styling is a little messy, but I'm trying to get my name (Tristen Roth) and the navbar-toggler-icon to appear next to each other on xs viewports. Currently, it puts them on two separate rows/lines vertically in the viewport. This leaves a lot of unattractive whitespaces to the right of the toggler icon and to both sides of my name.
Ideally, I want the name to appear next to the icon on the same line on xs viewports so it gets rid of the whitespace.
I've tried a bunch of things and some worked but they messed up the formatting on viewports over xs so it defeats the purpose.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.row-content {
padding-bottom: 10px;
border-bottom: 1px ridge;
}
header {
margin: 2%;
}
.navbar {
margin: 0;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-xs-3 col-md-4 col-xl-4" id="fullnavelement">
<nav class="navbar navbar-expand-md navbar-light" id="navelement">
<div class="container pl-0 d-inline-flex" id="navcontainer">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" id="navbar-links-custom">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link px-sm-2 px-md-3 px-lg-4 px-xl-5" href="about.html">About</a>
<a class="nav-link" href="portfolio.html">Portfolio</a>
</div>
</div>
</div>
</nav>
</div>
<div class="col-xs-9 col-md-4 col-xl-4 align-self-center" id="nameobject">
<h1 class="text-center text-nowrap">Tristen Roth</h1>
<div class="d-none d-lg-block">
<h5 class="text-center text-nowrap">Web Designer & Web Developer</h5>
</div>
</div>
<div class="col-md-4 col-xl-4 mt-4 d-none d-md-block">
<a class="btn btn-info text-nowrap" role="button">Contact Me</a>
</div>
</div>
</div>
</header>
<!-- end snippet -->
答案1
得分: 1
I just removed the xs from the col-xs-{n} classes and it worked:
<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-3 col-md-4 col-xl-4" id="fullnavelement">
<!--Content-->
</div>
<!--TODO change font-->
<div
class="col-9 col-md-4 col-xl-4 align-self-center"
id="nameobject">
<!--Content-->
</div>
</div>
</div>
</header>
look at this table to get an idea: https://getbootstrap.com/docs/4.5/layout/grid/#grid-options
英文:
I just removed the xs from the col-xs-{n} classes and it worked:
<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-3 col-md-4 col-xl-4" id="fullnavelement">
<!--Content-->
</div>
<!--TODO change font-->
<div
class="col-9 col-md-4 col-xl-4 align-self-center"
id="nameobject">
<!--Content-->
</div>
</div>
</div>
</header>
look at this table to get an idea: https://getbootstrap.com/docs/4.5/layout/grid/#grid-options
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论