- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图获得的效果是在 bootstrap 中使用列从左到右文本流动的位置。在第一个部分的第十二列之后,我想换行,希望代码能让它更清晰。
<?php
?>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="file.css"/>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navCollapse">f</button>
<a href="#" class="navbar-brand">
FLINTATION LOGO
</div>
<div class="collapse navbar-collapse navCollapse">
<ul class="nav navbar-nav navvbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-8">
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain wa
s born and I will give you a complete account of the system, and expound the actual teachings of th
e great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
or pursues or desires to obtain pain of itself, because it is pain, but because occas
ionally circumstances occur in which toil and pain can procure him some great pleasure. To take
a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some ad
vantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has n
o annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</div>
<div class="col-sm-4">
<img src="images/amber.png"/>
<div><br>
<div id="left">
<div>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain wa
s born and I will give you a complete account of the system, and expound the actual teachings of th
e great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
</div>
</div>
</body>
After the amber.png file on the page I want the next div to appear onto a new line starting from the left, instead of right.
希望大家能理解,有问题尽管问!
谢谢杰弗里。
最佳答案
您需要使用适当的结构,包括 Bootstrap .row
和列
一般结构是
<div class="container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<img/>
</div>
<div id="left" class="col-sm-12"> /* or whatever width */
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-8">
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain wa s born and I will give you a complete account of the system, and expound the actual teachings of th e great explorer of the truth, the master-builder of
human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue or pursues or desires to obtain pain of itself, because it is pain, but because occas ionally circumstances
occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some ad vantage from it? But who has any right to find fault with a man who chooses
to enjoy a pleasure that has n o annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</div>
<div class="col-sm-4">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
<div id="left" class="col-sm-12">
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain wa s born and I will give you a complete account of the system, and expound the actual teachings of th e great explorer of the truth, the master-builder of human
happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
</div>
</div>
</div>
关于jquery - 如何使文本从左右 Bootstrap 流动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36294264/
目前我找到的最佳解决方案是: http://jsfiddle.net/kizu/UUzE9/ 但事实并非如此。你看,我有三列;其中两个需要避免明确调整大小。好吧,第二个确实需要调整大小;但不完全是。
假设我们有两种类型和它们的联合: type A = {tag: 'a'}; type B = {tag: 'b'}; type U = A | B; 以及返回 A 或 B 的函数,具体取决于提供的标签
我有四个 div。 div 2 是 div 1 高度的一半,div 3 & 4 是 div 2 高度的一半。 在大显示器上 div 的位置很好: ---------------- ----------
要使用 display: block 居中元素,人们使用 margins: auto。如果我将 max-width 设置为需要居中的子项,并且它周围有足够的空间,它将根据需要尽可能多地流动到 max-
我试图获得的效果是在 bootstrap 中使用列从左到右文本流动的位置。在第一个部分的第十二列之后,我想换行,希望代码能让它更清晰。
我知道固定列可以在 X 轴和 Y 轴上溢出'。我还在某处读到,如果您将其中一个轴设置为自动/滚动,则另一组将继承前一个轴的行为,除非它被设置为 hidden。 我的困境是:我有一个固定的列
我基本上想要这个: ----------------------------------------------------------------- |
我正在尝试构建一个由三个主要 block 组成的移动就绪设计,广告 block 、内容 block 和侧边栏 block (加上页眉和页脚,但这些对于这个问题并不重要)。 想法是让广告和侧边栏具有固定
我正在关注这个guide上传照片。代码工作正常,但 flowtype 会告诉我有一个错误:调用方法“append”。不能在交集类型交集的任何成员上调用函数 出现错误后,流程不会传递该代码是有道理的,因
通过研究引用应用程序和阅读手册,我对 Spring WebFlow 2.1 有了第一印象。在进一步讨论之前,我想问一下对这个社区的印象。 实际上,我计划我的网站只包含一个网页。其他所有内容(登录/注销
我不确定为什么,但我得到这个文本显示/流动在 之外标签。我认为这与 float 有关,但我已经尝试了所有我知道的解决方案来修复它,但它们都没有奏效。 这是 jsfiddle(我在 Safari 中)
典型的 ISP 设置。一台服务器是 Web 服务器,另一台是 DB SQL 服务器。在两台计算机上创建了一个本地管理员帐户(假设为 XYZ)。因此,当我远程登录时,我要么是 WebServer\XYZ
我无法理解 IE7 中的 float 问题。我 div 包含一个向右浮动的列表,以便文本保持在左侧。我使用的方法在其他浏览器中有效,但在 IE7 中无效。我简化了代码以使问题更清楚:
我有两个街区。其中一个呈三 Angular 形。如何围绕这个 div 文本流动?例子: HTML: Triangle Lorem ipsum dolor sit a
我在网上搜索过,似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。 我希望有 3 列布局,左列固定为 200px,右列固定为 200px,中间列为剩余宽度,但最小宽度为 600px。所以整体最
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
我是一名优秀的程序员,十分优秀!