首页 \ 问答 \ Bootstrap col-md-4到col-sm-6(Bootstrap col-md-4 to col-sm-6)

Bootstrap col-md-4到col-sm-6(Bootstrap col-md-4 to col-sm-6)

我看过这个问题: Boostrap 3 - col-md-4到col-sm-6,或3x2到2x3的网格

但它对我没用。

这是我的HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="services-offered">
	<div class="row">
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
	</div>			
</div>

输出可以在标题下面的这个页面上看到(服务部分)

如你看到的。 这些类是col-md-4 col-sm-6 col-xs-12 service但它的位置如下:

x  x  x
      x
x  x

md及以上查看时

怎么解决这个问题?


I have seen this question: Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

But it hasn't worked for me.

This is my HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="services-offered">
	<div class="row">
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
	</div>			
</div>

And the output can be seen on this page underneath the header (services section)

As you can see. The classes are col-md-4 col-sm-6 col-xs-12 service however it is position like this:

x  x  x
      x
x  x

When viewing on a md and above

How can this be fixed?


原文:https://stackoverflow.com/questions/40005540
更新时间:2022-02-04 10:02

最满意答案

你可以做到这两点。

如果您在Solr中存储值并且只是使用搜索结果检索它们,则可能更容易实现解决方案(尽管另一个选项也很容易实现)。

无论你选择哪种方式,你都必须考虑db和Solr之间的同步,所以看看这些:
http://wiki.apache.org/solr/DataImportHandler#Scheduling
http://wiki.apache.org/solr/NearRealtimeSearch


You can do both.

It may be easier for you to implement solution if you store values in Solr and simply retrieve them with search results (although the other option is also very simple to implement).

Whichever way you choose you'll have to think about synchronization between your db and Solr, so check out these:
http://wiki.apache.org/solr/DataImportHandler#Scheduling
http://wiki.apache.org/solr/NearRealtimeSearch

相关问答

更多
  • BigQuery中的更新是原子的,但它们在作业结束时应用。 作业完成后,它会确保模式是等效的。 如果在作业运行时存在架构更新,则此检查将失败。 我们应该确保模式是兼容的而不是等效的。 如果你使用兼容的模式进行追加(即你有一个表模式的子集)应该成功,但是目前BigQuery不允许这样做。 我会提交一个错误。 Updates in BigQuery are atomic, but they are applied at the end of the job. When a job completes, it m ...
  • 对于页面,工作流程过程被附加到结构组(您可以在结构组的工作流程选项卡中选择过程定义)。 附加到SG时,您在该SG中创建或编辑的任何页面都将启动该项目的工作流程。 请注意,Structure Group不会继承此设置,因此每个SG都必须附加该过程。 对于组件,Workflow Processes附加到Schema(您可以在Schema的Workflow选项卡中选择Process Definition)。 当架构具有工作流程时,使用该架构创建或编辑的任何组件都将放入工作流程中。 请注意,子出版物不会自动将组件和 ...
  • Archer v6.x解决方案: 您可以从管理 - >高级工作流程 - >作业疑难解答中终止Archer中的现有工作流作业。 在那里,您可以对适用于您所使用的应用程序的工作流作业进行排序/过滤和标识。 您可以选择所有适用的选项,然后按键盘上的“删除”按钮进行批量删除。 这应该删除工作流作业,但留下应用程序记录。 之后,您应该能够停用应用程序中的高级工作流程。 Archer v5.x建议: RSA建议不要在Archer v5.x中使用工作流功能(由于各种原因(不灵活,没有很好记录,记录卡住等))。 这就是为什 ...
  • 没有将工作流与列表定义关联的默认方式,如果您想要执行以下任一选项,请执行以下操作 编写一个功能接收器并编写代码将工作流关联到列表。 另一种选择是创建内容类型,并且可以使用功能将工作流与该内容类型相关联。 There is no default way to associate a Workflow to the List Definition, If you want to do you have to follow one of the following option Write a Feature R ...
  • 如果内存对我来说是正确的,我相信Workflows可以创建在后台启动的PS作业。 像get-job和receive-job这样的Cmdlet将用于获取这些数据。 检查接收作业 - 保持,这将保留作业数据。 如果你使用它而没有数据在执行后消失。 After fiddling around with the code, with some help from the answers and some research, came up with this solution that worked for me: ...
  • 使用Solr Admin API创建新核心。 Use the Solr Admin API to create a new core.
  • 嗯,使用管道输入不起作用,但如果你调用不使用管道输入的函数它会工作: function Test-Function { [CmdLetBinding()] Param ( [int]$MaxRetrycount = 3, [Parameter(ValueFromPipeline=$True)] [String]$Definition ) return $MaxRetrycount } workflow T ...
  • 你可以做到这两点。 如果您在Solr中存储值并且只是使用搜索结果检索它们,则可能更容易实现解决方案(尽管另一个选项也很容易实现)。 无论你选择哪种方式,你都必须考虑db和Solr之间的同步,所以看看这些: http://wiki.apache.org/solr/DataImportHandler#Scheduling http://wiki.apache.org/solr/NearRealtimeSearch You can do both. It may be easier for you to impl ...
  • 我认为InvokeWorkflowActivity可能是你正在寻找的。 我用它从其他工作流中启动工作流程,并且运行良好。 只需注意新工作流程(就像所有工作流程)异步执行一样,因此“父工作流程”将在启动子工作流程后直接继续执行。 如果您(无论出于何种原因)不能使用InvokeWorkflowActivity(例如,如果新工作流将从父级工作流调用的服务中的代码启动),则您将以某种方式获得工作流运行时实例 我已经接触到这种情况的方式是在服务接口中声明一个事件,并在服务添加到运行时时让工作流主机将侦听器附加到该事件 ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)