Html Bootstrap 内联块显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46655388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap inline-block display
提问by Alex Strong
I have a question, why the result of my code is not displayed as two inline blocks but blocks are displayed one after another. I use bootstrap predefined class "d-inline-block" but it works only if a paragraph in a second div element is shorter than one line. I want to make two blocks one left, like a navigation block, and one right with some information.
我有一个问题，为什么我的代码的结果没有显示为两个内联块，而是一个接一个地显示块。我使用引导程序预定义类“d-inline-block”，但它仅在第二个 div 元素中的段落短于一行时才有效。我想制作两个块，一个左边，像导航块，一个右边有一些信息。
My code: http://pasted.co/96064fc9
我的代码：http: //pasted.co/96064fc9
Please, can you show me my mistake or advice what to add.
请，你能告诉我我的错误或建议添加什么。
(The task is to use only HTML and BOOTSTRAP (I can't add my own CSS code. I can use only predefined BOOTSTRAP classes))
（任务是仅使用 HTML 和 BOOTSTRAP（我无法添加自己的 CSS 代码。我只能使用预定义的 BOOTSTRAP 类））
采纳答案by Evrard-c
To use bootstrap without creating other CSS rules, I think you should use the bootstrap grid as follows:
要在不创建其他 CSS 规则的情况下使用引导程序，我认为您应该按如下方式使用引导程序网格：
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="list-group">
<li class="list-group-item">one</li>
<li class="list-group-item">two</li>
<li class="list-group-item">three</li>
<li class="list-group-item">four</li>
<li class="list-group-item">five</li>
</ul>
</div>
<div class="col-sm-6">
<h1>Lorem Ipsum</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>回答by Ella
Since CSS isn't an option, in Bootstrap 4 you can use the media object classes to create an object on one side with text next to it that doesn't wrap underneath. The examples they give use images, but you can put text in, too.
由于 CSS 不是一个选项，在 Bootstrap 4 中，您可以使用媒体对象类在一侧创建一个对象，其旁边的文本不会环绕在下面。他们给出的示例使用图像，但您也可以放入文本。
<div class="media">
<div> Text</div>
<div class="media-body">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
Source: http://getbootstrap.com/docs/4.0/layout/media-object/
来源：http: //getbootstrap.com/docs/4.0/layout/media-object/
Bootstrap 3 has similar media classes.
Bootstrap 3 有类似的媒体类。
<div class="media">
<div class="media-left">
LEFT
</div>
<div class="media-body">
This text will wrap without going underneath the media-left div
</div>
</div>
回答by TidyDev
Please remember to paste the code in the question in the future.
以后请记得把代码粘贴到问题中。
This CSS will make the list show horizontal instead of vertical.
此 CSS 将使列表显示为水平而不是垂直。
.list-group,
.list-group-item{
display: inline-block;
}
回答by DCR
.d-inline-block{
width:50%;
float:left;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="d-inline-block">
<ul class="list-group">
<li class="list-group-item">one</li>
<li class="list-group-item">two</li>
<li class="list-group-item">three</li>
<li class="list-group-item">four</li>
<li class="list-group-item">five</li>
</ul>
</div>
<div class="d-inline-block">
<h1>Lorem Ipsum</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!-- Replace this comment line by "Web Technology 1" homework solution. -->
</div>
</body>
</html>The default width of your div's is 100%. add the following css:
div 的默认宽度是 100%。添加以下css：
.d-inline-block{
width:50%;
float:left;
}
