编辑：

Question

我有一个目前以bootstrap css为中心设置的页面（我使用bootstrap 3，但如果它有所不同，可能会升级到4）。我不能按照我想要的方式来设计它。我不确定这是因为这是不可能的，还是因为这方面技能有限。

基本上，该页面将显示从搜索返回的项目列表。该列表的结构使得左侧有一个黑盒子＆＃39;白色文本中的类别和右侧有一个基于文本的链接，通常是一些描述性文本。

我已经设法在没有使用

的引导程序的情况下获得我想要的90％

   display: table;
   display: table-row;
   display: table-column;

这可以在fiddle中看到这需要一点间距＆amp;控制边距等，但具有我想要达到的要点 - 左手背景颜色＆＃39;单元格＆＃39;随着右侧文字的数量而扩大。

基本上有2列＆＃39;在结果列表中。左边是一个黑色背景的div，用于定义要返回的项目类型，右边是一个链接和一些关于链接的文本。

我现在已经失去了所有的bootstrap css。甚至添加一个＆＃39;容器＆＃39;制作＆＃39;列表＆＃39;转移到中心并添加行和col类，使其停止工作。

因此，如果您查看此fiddle，您可以希望看到我的意思（您可能需要展开显示页面，使其显示为2行。）

它有点凌乱，结构对我来说似乎很复杂，但它通常都可以正常工作。我被要求做的是对齐左右列，使它们出现一个很好的一致对齐，但是有很多文本（左边是不超过2行但右边是1到6之间或者7。

有没有办法使用bootstrap来实现使用＆＃39; display：table＆＃39;显示在第一小提琴中产生的效果？元素？

Answer 1

编辑：

以下是如何使用 Bootstrap 4 来实现与小提琴＃1相同的事情：

jsFiddle

＆＃13;

.row {
  margin-bottom: 5px;
}

.header-light {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

#result-container .container {
    padding-top: 0.5em;
    padding-left: 0px;
    padding-right: 0px;
}

.title {
    line-height: 1em;
    font-size: 1.8em;
    padding-top: 0px;
    padding-bottom: 0px;
}

.flex-wrapper {
  height:100%;
  display:flex;
  justify-content: center;
  flex-direction:column;
}

.box {
	color: white;
  background-color: #333333;
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.6em 0;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid">
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2 col-xs-2">
        Sample bit of text           
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk">Like Text the quick brown fox jumped over the flat cat with the aplomb of a fit ferile dog like animal</a>
          <span class="description">Description text this is lots of very very very interesting text text</span>
      </div>
    </div>
  </div>
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2">
        Sample bit of text with 2 rows             
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk"> this is short!</a>
          <span class="description">Description text</span>
      </div>
    </div>
  </div>
</div>

</body>

＆＃13;

Bootstrap columns documentation

让自己进入Bootstrap文档。您需要了解Column如何在Bootstrap中工作并考虑您的HTML。

特别是，容器中有容器，行中有容器。行应该在行中的容器和子容器中。

另外，我不确定你在问什么。你必须使用display: table吗？如果您只需要显示表格格式的查询结果，请使用dataTables。或者，如果可以的话，为您的研究结果生成一个简单的表格结构，这对您来说更容易理解，更容易实现，并提供适合您需求的垂直对齐功能。而且，Bootstrap表并不那么难看。

将引导程序添加到css样式表＆＃39;

1 个答案:

编辑：