Question

我想知道如何让我的容器像我的其他容器一样排在中间？这两个容器是货币转换器表，左侧是文本，与glypicons行图标一致。正如您从我的代码簿中看到的那样，左侧的货币转换器表和文本更靠左侧而不是中间位置。

我希望与中间的两个容器与glypicons行图标对齐

<!-- Widget Currency Rates Table  & intro text-->
<div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h1 class="header1">Currency Converter</h1>
        <p class="para1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
      <br>
        <div class="col-lg-8">
          <div id='gcw_mainFSi25cbHh' class='gcw_mainFSi25cbHh'></div>
          <script>function reloadFSi25cbHh(){ var sc = document.getElementById('scFSi25cbHh');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFSi25cbHh';sc.src = 'https://freecurrencyrates.com/en/widget-table?iso=GBPEURJPYAUD&df=2&p=FSi25cbHh&v=fi&source=eucb&width=600&width_title=0&firstrowvalue=1&thm=dddddd,ffffff,dddddd,dddddd,444444,dddddd,ffffff,0073EA,000000&title=Currency%20Converter Table&tzo=-60';var div = document.getElementById('gcw_mainFSi25cbHh');div.parentNode.insertBefore(sc, div);} reloadFSi25cbHh(); </script>
       </div>
    </div>
</div>

Answer 1

我认为很难从你的问题中解析出你的意图，但我认为你的意思是。 “如何更改列的列宽，以便它们占据父容器宽度的一半”是？否？

在bootstrap中，你有一个由12个“虚拟列”组成的“隐形网格”。您可以使用col-lg-4或col-lg-8等类创建列。（这就是你现在所拥有的.4 + 8 = 12 =占用整个容器）。要更改宽度，请尝试col-lg-6 + col-lg-6，这应该使它们的大小相同。因此：

<!-- Widget Currency Rates Table  & intro text-->
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h1 class="header1">Currency Converter</h1>
      <p class="para1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div>
    <div class="col-lg-6">
      <div id='gcw_mainFSi25cbHh' class='gcw_mainFSi25cbHh'></div>
      <script>function reloadFSi25cbHh(){ var sc = document.getElementById('scFSi25cbHh');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFSi25cbHh';sc.src = 'https://freecurrencyrates.com/en/widget-table?iso=GBPEURJPYAUD&df=2&p=FSi25cbHh&v=fi&source=eucb&width=600&width_title=0&firstrowvalue=1&thm=dddddd,ffffff,dddddd,dddddd,444444,dddddd,ffffff,0073EA,000000&title=Currency%20Converter Table&tzo=-60';var div = document.getElementById('gcw_mainFSi25cbHh');div.parentNode.insertBefore(sc, div);} reloadFSi25cbHh(); </script>
    </div>
  </div>
</div>

（我删除了一个<br>标记，因为你不需要它！）

如何将容器移到中间？

1 个答案: