我正在尝试创建一个内部有网格的导航栏。我需要让文本出现在一行中。从这个截图中可以看出，“Cryptocurrencies/Markets”和“Market Cap”以及 volume 占据了多行。我希望文本只占一行。请参阅随附的屏幕截图:
我试过更改 col-sm-x 类，但没有成功。我无法让所有内容都排在一条线上。有什么建议么？谢谢。
<html>
<head>
<title>@yield('meta_title') | @lang('constants.WEBSITE_NAME')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style type="text/css">
/* navbar */
.navbar-default {
background-color: #337ab7;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
.navbar-top {
padding-left:150px;
font-size:10px;
}
</style>
</head>
<body>
<nav class="navbar mobile navbar-default visible-xs">
<div class="navbar-header navbar-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="color:#fff"><strong>Cryptocurrencies</strong> 1000 / Markets 1000</div>
<div class="col-sm-5" style="color:#fff">
<strong>Market Cap</strong>:$263,920,404,123 <strong>24h Vol</strong>:$15,360,994,812
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-info btn-sm">Submit ICO</button>
<button type="button" class="btn btn-info btn-sm">Login</button>
</div>
</div>
</div>
</div>
</nav>
</body>
<html>
最佳答案
您可能还想在该 div 上包含宽度和边距...
.navbar-top {
padding-left: 150px;
font-size: 10px;
white-space: nowrap;
width: 92%;
margin: 0 auto;
}
在你的 .row div 添加 align-items-center
<div class="row align-items-center">
...
</div>
关于html - Bootstrap CSS - 使文本出现在网格容器中的一行上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51177334/