Question

在我的Wordpress页面上，我有以下代码：

$.mobile.date.prototype._setOptions($.datepicker.regional['pt-BR']);
$(":jqmData(role='date')").datepicker('destroy');
$(":jqmData(role='date')").datepicker();

你可以看到它的外观The Horror of Implicit Globals。

正如您所看到的，文本在wordpress页面模板区域内向右浮动50％。我希望文本在点击左侧第一个图片列下面的新行时开始占用100％的可用区域。

有关我希望它的外观的示例，请查看我们的here，如果您的宽高比很高，请放大。

我知道之前已经提出了类似的问题，但是在使用Bootstrap框架时我无法找到答案。

Answer 1

Bootstrap与在表格中设计没有太大的不同。我的意思是，他们甚至称他们为行和列。这是1990年代使用CSS的网页设计。（我只是半开玩笑。）

如果你想让那个图像做你想要的，你应该组合你的引导列（只使用一个col-md-12）并使用CSS来漂浮图像。

您的另一个选择是决定您想要的图像始终位于图像的一侧，以及您想要的文本，并将该文本移动到带有新col-md-12的新行。

Answer 2

See this answer，它是关于Bootstrap - 包围更大列的列

这不是'bootstrap'特定问题。所有引导程序都使用一些带有长样式表的类名。

不相关 - 我也会删除那些内联样式。

Answer 3

感谢@BenFried和@Rkhayat的提示，我能够提出一些正常运行的代码。

<div class="row">

    <div class="col-md-12">

        <a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
                <img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
        </a>

        <h1 class="text-center">Vision</h1>
        <p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>

        <h1 class="text-center">Mission</h1>
        <p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>

        <ul>
            <li>Building, managing and supporting cross-sector coalitions</li>
            <li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
            <li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
            <li>Advocating and shaping policy to support improvements of systems</li>
        </ul>

    </div> <!-- end <div class="col-md-12"> -->

</div> <!-- end <div class="row"> -->

将Bootstrap div中的文本传送到与其水平相邻的Wrap Around和Underneath列

3 个答案: